ECharts官方并没有给出小程序的相关参考，但是有大神做出了ECharts-小程序版，可以直接引用。

效果图

引用步骤

1、下载文件

GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

下载完成后，将【ec-canvas】文件夹复制到自己小程序目录中，我这里复制到根目录做个示范。

2、配置page显示ECharts

以下代码直接复制粘贴即可使用，按需修改要变化的参数即可

pages/index/index.json

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

pages/index/index.wxml

<view class="container"><view class="echarts"><ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas></view><button bindtap="change">改变</button>
</view>

pages/index/index.wxss

.container {width: 100%;
}
.echarts {width: 100%;height: 500rpx;
}
.ec-canvas {width: 100%;height: 100%;
}

pages/index/index.js

// 1、引入脚本
import * as echarts from '../../ec-canvas/echarts';Page({data: {ec: {lazyLoad: true // 懒加载}},//button绑定事件----动态修改表的内容,和初始化一样change(){let data = [2, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0];this.initchart(data);},loadchart(data){// 绑定组件（ec-canvas标签的id）let ec_canvas = this.selectComponent('#myChart');ec_canvas.init((canvas,width,height,dpr)=>{const chart =echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 解决模糊显示的问题})// echart表格的内容配置var myoption = {title: {},tooltip: {trigger: 'axis'},legend: {},xAxis: {type: 'category',boundaryGap: false,data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: {type: 'value',axisLabel: {formatter: '{value} '}},series: [{name: 'price',type: 'line',data: data, // 动态修改的数据markPoint: {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]}}]}chart.setOption(myoption);return chart;})},initchart(data){// 传递后台数据到图表中，进行懒加载图表this.loadchart(data);},onLoad: function (options) {//模拟后台数据初始化let data = [1, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0];this.initchart(data);},
})

微信小程序引入ECharts，并自定义动态修改表内参数配置相关推荐

微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
文章目录小程序引用图片的几种方式小程序如何引用svg图片? 小程序根据主题色,动态修改svg颜色总结及注意点小程序引用图片的几种方式这一期我们直入主题,教大家如何动态改变图标的颜色. 首先, ...
微信小程序引入echarts图表（保姆式）
在开发微信小程序时,有需求需要使用到柱状图,饼图等图表,但是echarts官网没有小程序版,不过已经有人在github发布echarts的小程序版本了,感谢大佬的分享. 首先,下载echarts微信版 ...
微信小程序开发（一）动态修改页面标题
为提高微信小程序的用户体验,原则上设计页面时,页面顶部标题应随内容不同进行修改. 微信小程序固定架构 pages example example.js example.json example.wxm ...
微信小程序引入echarts插件教程
1.在app.json中添加如下代码: {"plugins": {"echarts": {"version": "1.0.3&qu ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...

微信小程序引入ECharts，并自定义动态修改表内参数配置

效果图

引用步骤

1、下载文件

2、配置page显示ECharts

以下代码直接复制粘贴即可使用，按需修改要变化的参数即可

微信小程序引入ECharts，并自定义动态修改表内参数配置相关推荐

最新文章

热门文章