微信小程序使用 ECharts 实现数据可视化
微信小程序使用 ECharts 显示图表
-
首先创建微信小程序
这里就不再赘述
-
下载 GitHub 上的 ecomfe/echarts-for-weixin
下载后解压,打开文件夹,里面的 ec-canvas 文件夹是我们需要的
-
创建图表
首先,把下载的 ec-canvas 文件夹复制到小程序根目录中,与 pages 同级
然后在
page/bar
目录下新建以下几个文件 -
配置
index.json
配置如下:{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
这里意思是,允许在
pages/bar/index.wxml
中使用ec-canvas
组件index.wxml
配置如下:<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
其中的
ec
是一个在index.js
中定义的对象它能够使图表在页面加载后被初始化并设置
index.js
配置如下:function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { ... //这里填写需要引入的组件 }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } } });
注意: 这里的 option 里面填写需要的组件,可以在官方实例里面找,直接把官方实例中的代码复制进来即可
index.wxss
配置如下:ec-canvas { width: 100%; height: 100%; } ec-canvas { width: 100%; height: 100%; } .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; } .picker-pos { margin-top: -130rpx; margin-left: 150rpx; color: blueviolet; }
官方文档上没有给出
wxss
样式,而且下载的文件里的样式也没用这里如果找错了样式,会出现控制台能输出
ls
参数,但是图表不显示的情况这个着实被坑到了,还是我同学找到的一个样式
才把图表显示出来了。。。
参阅:
i. [ECharts官方文档]([https://www.echartsjs.com/zh/tutorial.html#在微信小程序中使用 ECharts](https://www.echartsjs.com/zh/tutorial.html#在微信小程序中使用 ECharts))
ii. 我同学的博客
样式在他那里找的哈哈哈