微信小程序+ECharts实现动态刷新

 

    最近遇到了一个需求，就是要在小程序中实时刷新图表，最开始选择的是wx-chart，然后发现不能满足我的需求，最后选择了ECharts，也踩了一些坑，通过在网上收集资料，终于弄出来了，记录下我实现的过程。

1.首先到ECharts官网下载它的例子，然后把ec-canvas文件拷贝下来放到你自己的项目中：

2.然后在你需要用的页面引入，在xxx.json中加入，这里要注意路径，我的页面统一是放在pages文件夹中的：

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

3.Ok，开始干正事了，我这里就举一个页面两个图表的例子，先把简单的布局和样式弄好

xxx.wxml：

需要提供两个canvas盒子：

<view class="content">
    <ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{
  { ecOne}}"></ec-canvas>
    <ec-canvas id="mychart-two" canvas-id="mychart-multi-two" ec="{
  { ecTwo }}"></ec-canvas>
</view> 

xxx.wxss:

.content {
    width: 100%;
    background-color: #F2F2F2;
    overflow-y: auto;
}
#mychart-one {
    position: absolute; 
    top: 0;
    height: 50%;
    left: 0;
    righ