微信小程序中使用 ECharts步骤

参见官网：
Echarts官网文档

1. 下载
   下载 GitHub 上的 ecomfe/echarts-for-weixin项目。
   其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。
2. 引入组件
   拷贝ec-canvas目录到你的项目中
3. 创建图表过程
   （1）index.json 配置如下：

{
  "usingComponents": {
    //添加组件路径（根据自己的路径更改）
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

（2）index.wxml 中，创建一个 组件，内容如下：

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

（3）index.js 的结构如下：

在js文件中引用echarts ：
import * as echarts from ‘…/…/ec-canvas/echarts’**

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
    }
  }
});

（4）index.wxss中：

一定要给容器规定宽度和高度，才能显示！

ec-canvas{
  width: 100%;
  height: 50%;
}

（5）公共样式app.wxss中：

.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;
}

从官网中随便找一个实例拷贝到js中
var option = {
}
即可显示图表。