微信小程序使用 ECharts 实现数据可视化

微信小程序使用 ECharts 显示图表

1. 首先创建微信小程序

   这里就不再赘述

2. 下载 GitHub 上的 ecomfe/echarts-for-weixin

   下载后解压，打开文件夹，里面的 ec-canvas 文件夹是我们需要的

3. 创建图表

   首先，把下载的 ec-canvas 文件夹复制到小程序根目录中，与 pages 同级

   然后在 page/bar 目录下新建以下几个文件

   

4. 配置

   index.json 配置如下：

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

   这里意思是，允许在 pages/bar/index.wxml 中使用 ec-canvas 组件

   index.wxml 配置如下：

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

   其中的 ec 是一个在 index.js 中定义的对象

   它能够使图表在页面加载后被初始化并设置

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

   注意： 这里的 option 里面填写需要的组件，可以在官方实例里面找，直接把官方实例中的代码复制进来即可

   index.wxss 配置如下：

   ec-canvas {
     width: 100%;
     height: 100%;
     }
     ec-canvas {
     width: 100%;
     height: 100%;
     }
     .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;
     }
     .picker-pos {
     margin-top: -130rpx;
     margin-left: 150rpx;
     color: blueviolet;
     }
   

   官方文档上没有给出 wxss 样式，而且下载的文件里的样式也没用

   这里如果找错了样式，会出现控制台能输出 ls 参数，但是图表不显示的情况

   这个着实被坑到了，还是我同学找到的一个样式

   才把图表显示出来了。。。

参阅：

i. [ECharts官方文档]([https://www.echartsjs.com/zh/tutorial.html#在微信小程序中使用 ECharts](https://www.echartsjs.com/zh/tutorial.html#在微信小程序中使用 ECharts))

ii. 我同学的博客

样式在他那里找的哈哈哈