如何在微信小程序中应用echarts

echarts官网上讲的有点粗糙了，不太细致。我来细致的写一下
https://echarts.apache.org/zh/index.html这是echarts的官网

1.

https://github.com/ecomfe/echarts-for-weixin先去这个网址把这个项目下载下来，后面会应用到。直接下载到电脑上即可

2.

仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。把刚刚下载的文件中的ec-canvas文件到自己的项目里的根目录下

3.

wxml 中，编写代码，内容如下：

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

4.

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

其中的省略号为自己要写的内容

5.

随机找一段代码复制进去，看看能否显示
例如：

 xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]

6.

到这还不能显示啦
还需要在js文件中导入echarts的

import * as echarts from '../../ec-canvas/echarts';

7.

在wxss中编写

ec-canvas{
  width: 80%;
  height: 50%;
  background-color: #eee;
}

8.

在app.wxss中编写

/**app.wxss**/
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;  /* flex布局 */
  /* 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 */
  flex-direction: column;  /*决定主轴的方向（即项目的排列方向） */
  /* column：主轴为垂直方向，起点在上沿。*/
  align-items: center;   /*定义项目在交叉轴上如何对齐 */
  /* center：交叉轴的中点对齐*/
  justify-content: space-between;   /* 定义了项目在主轴上的对齐方式 */
  /* space-between：两端对齐，项目之间的间隔都相等 */
  box-sizing: border-box;
  /* 
    content-box：padding和border不被包含在定义的width和height之内
    盒子的实际宽度=设置的width+padding+border 
    border-box：padding和border被包含在定义的width和height之内。
    盒子的实际宽度=设置的width（padding和border不会影响实际宽度）
  */
}

这就可以显示了。