微信小程序实现Echarts,并根据不同点击事件重新渲染_微信小程序echarts二次渲染

引入文件

为了避免echarts过大,我只选取了部分图表,此过程较为繁琐,直接放我自己打包好的,或者自行搜索"微信小程序引入echarts"

链接：https://pan.quark.cn/s/9831bda4af95
提取码：FbqR

• 解压后移动到component文件夹下,没有就创建个
  
• 然后在需要用到的页面引用下

import * as echarts from "../../component/echarts/echarts"
1

需求

• 饼图展示进餐种类级数量
• 需要按照每日、每周和每月来展示数据

前端代码

• wxml

 <van-tabs bind:click="onTabClick">
  <van-tab title="日">
    <van-u-calendar 
      cal-type="day"
      bind:click="getDayDate"
    />
  </van-tab>
  <van-tab title="周">  
    <van-u-calendar
      cal-type="week"
        bindtap="getWeekDate"
      data-type="2"
    />
  </van-tab>
  <van-tab title="月">  
    <van-u-calendar
      cal-type="month"
      bind:click="getMonthDate"
    />
  </van-tab>  
</van-tabs>

  <view class="ec-container">
     <ec-canvas wx:if="{{chartsIndex == 1}}" canvas-id="echart-pie" ec="{{ec}}" style="width: 750rpx; height: 378rpx; display: block; box-sizing: border-box"></ec-canvas>
     <ec-canvas wx:if="{{chartsIndex == 2}}" canvas-id="echart-pie" ec="{{ec}}" style="width: 750rpx; height: 378rpx; display: block; box-sizing: border-box"></ec-canvas>
     <ec-canvas wx:if="{{chartsIndex == 3}}" canvas-id="echart-pie" ec="{{ec}}" style="width: 750rpx; height: 378rpx; display: block; box-sizing: border-box"></ec-canvas>

</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

三个wx:if是为了点击事件触发后重新渲染饼图

• wxss

 .ec-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 30vh;
  }
  
  ec-canvas {
    width: 100%;
    height: 100%;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

• js

var app = getApp();
const $api = require('../../utils/request').API;

import * as echarts from "../../component/echarts/echarts"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
        onInit: initChart
      },
    active: 0,
    chartsIndex: 1,
    emptyList:[{value:0,name:"暂无数据"}],
  },

  // 获取数据 
  getDietaryEcharts(type){
    const userInfo = wx.getStorageSync('userInfo')
    const data = {
        userId: userInfo.id,
        type: this.data.dietaryType
    }
    if(type != '' && type != undefined && type != null){
        data.type = type
    }
    $api.getDietartEcharts(data).then(res=>{
        if (res.data.code === 10000) {
            console.log("echarts: " + JSON.stringify(res.data.data));
            if (res.data.data != null && res.data.data != '' && res.data.data != undefined && res.data.data.length > 0 ) {
                const result = res.data.data.reduce((acc, cur) => {
                    const types = cur.split(',');
                    for (let i = 0; i < types.length; i++) {
                      const type = types[i];
                      if (acc[type]) {
                        acc[type]++;
                      } else {
                        acc[type] = 1;
                      }
                    }
                    return acc;
                  }, {});
                  console.log(result);
                  let arr = []
                  for (const key in result) {
                      if (Object.hasOwnProperty.call(result, key)) {
                          arr.push({
                              name: key,
                              value: result[key]
                          })
                          
                      }
                  }               
                  app.globalData.dietaryChartData = arr;
              
            }else{
                app.globalData.dietaryChartData = this.data.emptyList
            }
        }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDietaryEcharts()
  },

})

// 初始化echarts
function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
    });
    canvas.setChart(chart);
   
    var option = {
      backgroundColor: 'rgba(255,255,255,0.8)',
      tooltip: {
        trigger: 'item'
      },
      legend: {//显示图例
        show: true,
        top: '5%',
        left: 'center'
      },
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        
        type: 'pie',
        center: ['50%', '60%'],//位置
        radius: ['20%', '30%'],//圈大小
        
        data: app.globalData.dietaryChartData
      }]
    };
    chart.setOption(option);
    return chart;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

因为渲染图表的方法initChart在Page外面,我无法获取page内的data,所以走了个歪门

用了app.js中的全局变量来存取要渲染的数据

实现效果

• 日
  
• 周
  
• 月