小程序使用echarts记录(一)

最近公司新项目，要用小程序开发图表，之前在PC上做过好多echarts图表（其实就是懒）的情况下，二营长把意大利炮拉上来，小程序版本在这里

1. 老规矩先下demo，拷贝 ec-canvas 目录到新建的项目下
2. 创建index模块，在index.json中配置图表项，这样我们就可以在index.wxml 中使用 <ec-canvas>组件

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

3. 在index.wxml中创建<ec-canvas>组件

<view class="chart-view" >
   <ec-canvas id="mychart-dom-bar" class='mychart' canvas-id="mychart-bar" ec="{{ ec }}">	</ec-canvas>
</view>

其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：

import * as echarts from '../../componts/ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

• 到这里最简单的demo就完成了，说几个注意事项：

• class名为container这个view标签需要 保证图表的初始化的时候是有宽度和高度的，不然无法出现图表

• 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas=“true” 的情况下，使用新的 Canvas 2d（默认）。使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启，如果仍需使用旧版 Canvas，如下：

 <ec-canvas id="xxx" canvas-id="xxx" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>

————————————————————————————————————————————

下一篇会介绍，如何在一个页面同时创建多个图表