微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大

引入echarts组件

1. 前往echarts微信版的github地址: https://github.com/ecomfe/echarts-for-weixin

2. 拷贝 ec-canvas 目录到你的微信小程序中

3. 在页面中使用

//json页面
{
    "usingComponents": {
        "ec-canvas": "../../components/ec-canvas/ec-canvas"
    }
}

// js页面
import * as echarts from '../../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
    }
  }
});

这里注意要给ec-canvas设置一定的高度和宽度

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

展示echarts图表数据

1.最基本的使用
前往echarts文档的地址: https://echarts.apache.org/examples/zh/index.html
找到你心仪的图表样式

然后复制option 的内容到自己项目代码的option中即可展示最基本的图表

延迟加载图表

无用代码删除后的精简版

import * as echarts from "../../components/ec-canvas/echarts";
function line_set(chart, data) {
 //xdata, ydata分别表示x轴数据和y轴数据
 var option = {
   xAxis: {
     type: "category",
     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
   },
   yAxis: {
     type: "value",
   },
   series: [
     {
       data: data,
       type: "line",
     },
   ],
 };
 chart.setOption(option);
}

Page({
 data: {
   ec: {
     lazyLoad: true, //延迟加载
   },
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   this.oneComponent = this.selectComponent("#mychart-dom-bar");
   this.getOption();
   // this.connectStart()
 },

 onReady: function () {},

 init_chart: function (data) {
   //初始化图表
   this.oneComponent.init((canvas, width, height, dpr) => {
     const chart = echarts.init(canvas, null, {
       width: width,
       height: height,
       devicePixelRatio: dpr, // new
     });
     line_set(chart, data);
     //   this.chart = chart;
     //   return chart;
   });
 },
 //请求数据
 getOption: function () {
   // 获取数据填充进data中，具体依据实际填充
   const data = [
     [1, 2],
     [2, 3],
     [3, 4],
     [4, 0.4],
   ];
   this.init_chart(data);
 },
});

如何解决echarts文件过大

1.引入echarts以后，单echarts代码包已经973KB，怎么样能缩小其体积呢？
2.使用自定义图表的方法 压缩文件大小。
（因为实际项目中可能用到的图表可能就一两个，不需要全部引进，所以可以根据实际项目情况选择用到的图表即可 ）
echarts图表在线定制如下图所示: https://echarts.apache.org/zh/builder.html

3.将下载的echarts.min.js重命名为echarts.js替换项目ec-canvas目录下的echarts.js,将原本大小将近1000KB的echarts压缩了一半。