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

前提:

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

如生成以下的折线图:

 

 

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

 

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

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

 

 

 

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

 

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

  

 

 

lineChart.wpy 组件编写:

 1 <template>
 2   <view class="line__chart">
 3     <ec_canvas
 4       
 5       canvas-
 6       ec="{{ ec }}"
 7       bind:init="echartInit"
 8     ></ec_canvas>
 9   </view>
10 </template>
11 
12 <script>
13 import wepy from 'wepy';
14 import echarts from './ec-canvas/echarts.js';
15 
16 export default class LineChart extends wepy.component {
17   data = {
18     ec: {},
19   };
20 
21   methods = {
22     echartInit(e) {
23       this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
24     },
25   };
26 
27   initChart(canvas, width, height) {
28     const chart = echarts.init(canvas, null, {
29       width: width,
30       height: height,
31     });
32     canvas.setChart(chart);
33 
34     const option = {
35       xAxis: {
36         type: 'category',
37         data: ['1', '2', '3', '4', '5'],
38         axisTick: {
39           show: false,
40         },
41         axisLabel: {
42           color: '#666',
43           fontWeight: 800,
44         },
45       },
46      legend: {
47         data: ['体温异常人数', '体温正常人数']
48     },
49       yAxis: {
50         type: 'value',
51         interval: 20,
52         max: 300,
53         show: true,
54       },
55       series: [
56         {
57           name: "体温异常人数",
58           data: [12,5,16,7,4],
59           type: 'line',
60           lineStyle: {
61             color: '#ff6147',
62             width: 1,
63           },
64           // showSymbol: false,
65         },
66         {
67           name: "体温正常人数",
68           data: [55,100,150,100,120],
69           type: 'line',
70           lineStyle: {
71             color: '#237dff',
72             width: 1,
73           },
74         },
75       ],
76     };
77 
78     chart.setOption(option);
79     return chart;
80   }
81 }
82 </script>
83 
84 <style lang="less">
85 .line__chart {
86   width: 100%;
87   height: 600rpx;
88   margin: 0 auto;
89 }
90 </style>

View Code