uni-app APP端引入echart

公司要做app，选型选的uni-app，奈何之前没接触过。
一步一步摸索着把框架搭建好了，发现app中有图表，那我图表又用什么呢？
又去翻文档，又是百度的。
最后还是在官方找到合适的答案

ECharts页面模板
ECharts页面模板是 mpvue-echarts 的使用示例模板，本示例引用了 mpvue-echarts 和百度的 echarts
如不考虑小程序，那么App端和H5端，可以通过renderjs技术来使用echart、f2等web图表，功能性能比uchart更好。什么是renderjs、基于renderjs使用echart的示例

通过这个顺着找到了renderjs-echarts-demo
下载下来是目录结构

打开index.vue

<template><view class="content"><!-- #ifdef APP-PLUS || H5 --><view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view><button @click="changeOption">更新数据</button><!-- #endif --><!-- #ifndef APP-PLUS || H5 --><view>非 APP、H5 环境不支持</view><!-- #endif --></view>
</template><script>export default {data() {return {option: {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}}},onLoad() {},methods: {changeOption() {const data = this.option.series[0].data// 随机更新示例数据data.forEach((item, index) => {data.splice(index, 1, Math.random() * 40)})},onViewClick(options) {console.log(options)}}}
</script><script module="echarts" lang="renderjs">let myChartexport default {mounted() {if (typeof window.echarts === 'function') {this.initEcharts()} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算script.src = 'static/echarts.js'script.onload = this.initEcharts.bind(this)document.head.appendChild(script)}},methods: {initEcharts() {myChart = echarts.init(document.getElementById('echarts'))// 观测更新的数据在 view 层可以直接访问到myChart.setOption(this.option)},updateEcharts(newValue, oldValue, ownerInstance, instance) {// 监听 service 层数据变更myChart.setOption(newValue)},onClick(event, ownerInstance) {// 调用 service 层的方法ownerInstance.callMethod('onViewClick', {test: 'test'})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.echarts {margin-top: 100px;width: 100%;height: 300px;}
</style>

根据这个最后自己修改了一下，echarts.vue

<template><view:prop="option":change:prop="echarts.updateEcharts":id="option.id"class="echarts"@click="echarts.onClick"></view>
</template><script>export default {props: {option: {type: Object,required: true},},data() {return {}},created() {this.option.id = this.getId()console.log('iiii',this.option.id)},methods: {// 随机生成一个id 避免id重复getId (len = 36) {return Number(Math.random().toString().substr(3,len) + Date.now()).toString(len)},onViewClick(options) {this.$emit('click', options)}}}
</script><script module="echarts" lang="renderjs">let myChartexport default {mounted() {if (typeof window.echarts === 'function') {this.initEcharts()} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算script.src = 'static/echarts.js'script.onload = this.initEcharts.bind(this)document.head.appendChild(script)}},methods: {initEcharts() {myChart = echarts.init(document.getElementById(this.option.id))// // 观测更新的数据在 view 层可以直接访问到myChart.setOption(this.option)},updateEcharts(newValue, oldValue, ownerInstance, instance) {console.log(newValue)// 监听 service 层数据变更myChart.setOption(newValue)},onClick(event, ownerInstance) {console.log('event', event, ownerInstance)// 调用 service 层的方法ownerInstance.callMethod('onViewClick', event)}}}
</script><style lang="less" scoped>.echarts{width: 100%;height: 300upx;}
</style>

在页面中引入使用此组件

<template><view class=""><echarts :option="option"/><div @click="upDate">更新数据</div></view>
</template>
<script>import echarts from '../../components/echarts/index.vue'
export default {components: {echarts},data() {return {option: {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}}},mounted() {},created() {},methods:{},
}
</script>
<style lang='less' scoped>
</style>

uni-app APP端引入echart相关推荐

【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
前言为什么要使用阿里图标库: 图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
汽车之家移动主App服务端架构变迁
声明:本文为<程序员>原创文章,未经允许不得转载,更多精彩文章请订阅2016年程序员:http://dingyue.programmer.com.cn/ 导语:汽车之家移动主App服务端架 ...
我的uni框架APP（共享充电投放）独立开发日记第二天
我的uni框架APP(共享充电投放)独立开发日记 APP开发第二天(UI实现到创作) Tap_Bar: 首页充电榜邀请赚钱项目说明物品我的会员资料下载APP 我的收益我要提现我的下级 ...
百度APP移动端网络深度优化实践分享(三)：移动端弱网优化篇
本文由百度技术团队"蔡锐"原创发表于"百度App技术"公众号,原题为<百度App网络深度优化系列<三>弱网优化>,感谢原作者的无私分享. ...
微信小程序android错误,app安卓端跳转到微信小程序失败
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] app安卓端跳转到 ...
超市百货电商app移动端原型+通用模块全局规则说明+超市电商后台管理web端原型+超市电商产品原型及需求文档+业务后台（商品管理+广告管理+活动管理）
作品介绍:Axure原型内容主要包括:超市百货电商app移动端原型+文档变更记录+名词术语说明+产品业务功能框架+通用模块和全局规则说明(消息推送机制+输入提交规则+图片加载机制+权限类提示说明+搜索 ...
如何部署搭建app服务端运行环境(java)?
简介: app服务端和web的服务端的配置是一样的.所以要搭建APP根据web服务端配置即可. 前言:app服务端和web的服务端的配置是一样的.所以要搭建APP根据web服务端配置即可. 1.购买服 ...
APP移动端自动化测试工具选型“兵器谱”一览(主流开源工具)
(下面大多数工具都是开源工具,在github,码云等开源平台都能找到) "测试那点事儿"在看到360旗下的测试团队整理的关于目前APP移动端自动化相关的工具,觉得总结的很到位,对目 ...
原生七彩影视APP源码支持PC+WAP+APP三端
介绍: 原生七彩安卓影视APP源码支持PC+WAP+APP三端对接苹果CMS后台附安装教程网盘下载地址: http://kekewangLuo.cc/8gxTECO3W4q0 图片:

uni-app APP端引入echart

uni-app APP端引入echart相关推荐

最新文章

热门文章