WePY框架开发的小程序中使用 echarts折线图

前提:

　　本次开发小程序使用的是WePY 1.x的版本(由于时间比较紧急,遂用前辈已开发完的项目进行二次开发,不然我本人更倾向采用 WePY 2.x版本开发),  此次开发中有折线图与圆饼图的需求,

如生成以下的折线图:

解决方案: 经查找决定使用 echarts(一个基于 JavaScript 的开源可视化图表库)开发

 下面就本次使用的方案进行讲解 :

1.进入 echarts官网,搜索小程序, 就会用小程序专门使用的一套方案

2. 去github中的 ecomfe/echarts-for-weixin 下载(ec-canvas)这个包 

3..将下载好的包放到项目的 components 中, 将需要生成的折线图做成一个组件, 提高代码的可维护性

  

lineChart.wpy 组件编写:

<template>
  <view class="line__chart">
    <ec_canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec }}"
      bind:init="echartInit"
    ></ec_canvas>
  </view>
</template>

<script>
import wepy from 'wepy';
import echarts from './ec-canvas/echarts.js';

export default class LineChart extends wepy.component {
  data = {
    ec: {},
  };

  methods = {
    echartInit(e) {
      this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
    },
  };

  initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
       width,
      height: height,
    });
    canvas.setChart(chart);

    const option = {
      xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5'],
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#666',
          fontWeight: 800,
        },
      },
     legend: {
        data: ['体温异常人数', '体温正常人数']
    },
      yAxis: {
        type: 'value',
        interval: 20,
        max: 300,
        show: true,
      },
      series: [
        {
          name: "体温异常人数",
          data: [12,5,16,7,4],
          type: 'line',
          lineStyle: {
            color: '#ff6147',
             1,
          },
          // showSymbol: false,
        },
        {
          name: "体温正常人数",
          data: [55,100,150,100,120],
          type: 'line',
          lineStyle: {
            color: '#237dff',
             1,
          },
        },
      ],
    };

    chart.setOption(option);
    return chart;
  }
}
</script>

<style lang="less">
.line__chart {
   100%;
  height: 600rpx;
  margin: 0 auto;
}
</style>

关键点:

　　在组件中需要引用 echarts

4.页面上引用

<template>
  <view class="page-index">
        <view class="chart_box">
            <LineChart></LineChart>
        </view> 
  </view>
</template>    

<script>
import wepy from 'wepy';
import LineChart from '../../components/charts/lineChart';
export default class Index extends wepy.page {
  config = {
    navigationBarTitleText: '数据中心',
    navigationBarBackgroundColor: '#fff',
    navigationBarTextStyle: 'black',
    usingComponents: {
      ec_canvas: '../../components/charts/ec-canvas/ec-canvas',
    },
  };

  components = {
    LineChart,
  };
}
</script>

关键点: 

　　需要在 使用折线图的页面中配置 config的 usingComponents

config = {
    navigationBarTitleText: '数据中心',
    navigationBarBackgroundColor: '#fff',
    navigationBarTextStyle: 'black',
    usingComponents: {
      ec_canvas: '../../components/charts/ec-canvas/ec-canvas',
    },
  };

5.遇到打包问题: 此时折线图就已经可以在本地小程序中显示了,但是当你想要打包发版时,会发现包很大,其中ec-canvas这个包就占 1.13M,一一检查,发现 echarts.js这个包就占 1.12M

显而易见,解决方案就是减少 echarts.js 这个包的体积

6. 解决打包问题: 查询资料发现 echarts支持自定义需要的模块,点击官网的下载,有 "在线定制" 的按钮

 点进去勾选所用到的图表, 坐标系,组件, 再勾选 工具集,代码压缩 ,最后下载即可,你会发现,下载的就是 echarts.js 

 替换项目中的文件,完美地解决了这个问题, 为了以防万一, 在小程序的工具中勾选 上传代码时自动压缩样式, 上传代码时自动压缩混淆

 此时就可以上传代码包