关于Echarts在小程序中的运用

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
你也可以根据我的方法使用，大同小异
自取链接: https://pan.baidu.com/s/1lqfc7hyiD0_gHxfrcQz_PA 提取码: hqhb
如果根据我所说的，请按照以下步骤操作：
第一步：copy网盘文件中的ec-canvas放入自己新建项目中，如下![介绍](https://img-blog.csdnimg.cn/20200718232010981.png)

在 app.json 的 pages 中增加 ‘pages/home/home’，或者手动添加，纯粹个人习惯
引入代码如下：
home.json如下：

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

“ec-canvas”: "…/…/ec-canvas/ec-canvas"此处的路径千万要写对，否则无法使用 组件
.wxml如下：

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

ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。home.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
    }
  }
});

其中，var option = {…};这里面的内容需要我们自己写，可以参考以下网址：
https://echarts.apache.org/examples/zh/index.html

以下是官网所未提及的，需注意

之后，我们需要在home.js中引用echarts,代码如下：

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

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不会影响实际宽度）
  */
}

home.wxss如下

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

希望可以帮到你们，今天就分享到这~~~~~~~~