微信小程序中使用ec-canvas(包括单图表和多图表)

我会带着你远行 2022-12-11 09:23 907阅读 0赞

微信小程序中使用ec-cavas

首先引入ec-canvas插件  
首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。  
ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。

**注意（踩坑）的点：**

**1 ec-canvas组件标签这里一定要设置百分比宽高，不然页面不显示**

**2 ec初始化渲染图表的顺序一定要在数据挂载之前，为了保证这一点，要在数据挂载那里做一个异步，不然概率性出现数据挂载在初始化渲染图表之前**

**3 在挂载的时候判断一下图表有没有初始化渲染上去，不然图表未初始化渲染会报错**

**4 一个页面写多个图表的时候不能写一个子组件然后多次调用，这样子只会显示最后一个渲染的图表，乖乖的一个一个的按照下面的这个写吧（ TODO 这个多个图表的目前只找到这种写法，应该会有更优的写法，这样写的有点冗余）**

**单个图表**  
xml中

js中

// components/echarts/echarts.js
    import * as echarts from '../ec-canvas/echarts';
    const app = getApp();
    
    //记得在这里全局声明一下
    var seriesDataArr = [];
    var timeArr = [];
    var chart = null;
    
    Component({ 
      /** * 组件的属性列表 */
      properties: { 
        // 数据
        seriesData: { 
          type: Array,
          value: [],
          observer: function (seriesData) { 
          //这里写个订阅事件去监听父组件传过来的值，
          //为什么要监听呢，因为父子间时通过调接口异步获取的数据，需要去监听一下，在onshow中是获取不到的
            if (seriesData.length > 0) { 
            //这里为什么要写setTimeout呢，因为要保证下面的ec渲染初始化图表之后再来这里去调取数据挂载上去
              setTimeout(() => { 
                console.log(seriesData,'关注度图表数据');
                seriesDataArr = seriesData
                this.runColumncCanva()
              }, 200)
            }
          }
        },
        // 横坐标日期
        time: { 
          type: Array,
          value: [],
          observer: function (time) { 
            if (time.length > 0) { 
              timeArr = [];
              time.forEach(time => { 
                // 去掉年份，并且以 / 显示日期
                time = [(time.split('-'))[1],(time.split('-'))[2]].join('/')
                timeArr.push(time)
              })
              this.runColumncCanva();
            }
          }
        }
      },
    
      /** * 组件的初始数据 */
      data: { 
        ec: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            console.log('关注度渲染ec');
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart = echarts.init(canvas, null, { 
              width: width,
              height: height
            });
            canvas.setChart(chart);
            return chart;
          }
        }
      },
    
      /** * 组件的方法列表 */
      methods: { 
        // 绘制图表
        runColumncCanva() { 
          var option = { 
            color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
            grid: { 
              containLabel: true
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              data: timeArr,
              axisLabel:{ 
                rotate:45,//倾斜度 -90 至 90 默认为0
              }
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                lineStyle: { 
                  type: 'dashed'
                }
              }
            },
            series: seriesDataArr
          };
          //这里一定要做个charts是否存在的判断，因为万一ec那里没有初始化，这里就会报错
          if (chart) { 
            chart.setOption(option);
          }
        }
      }
    });

json文件

{ 
      "component": true,
      "usingComponents": { 
        "ec-canvas": "../ec-canvas/ec-canvas"
      }
    }

//注意的点： // 1 这个container容器一定要设置固定宽高 .container { 
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      height: 516rpx;
      width: 611rpx;
    }
    // ！！注意：这里也一定要设置个百分比宽高，不然图表在页面上不显示 ec-canvas { 
      width: 100%;
      height: 100%;
    }

**多个图表**

<view class="echart-list flex flex-col">
      <view class="item-container">
        <view class="ec-head">
          <view class="bower-text header-text">浏览量</view>
          <view class="header-text right-text">{
       {browseDataCount.symbol}}{
       {browseDataCount.increase}}%</view>
        </view>
        <view class="ec-container" wx:if="true">
          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec1 }}"></ec-canvas>
        </view>
      </view>
      <view class="item-container">
        <view class="ec-head">
          <view class="transmit-text header-text">转发量</view>
          <view class="header-text right-text">{
       {transmitDataCount.symbol}}{
       {transmitDataCount.increase}}%</view>
        </view>
        <view class="ec-container">
          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec2 }}"></ec-canvas>
        </view>
      </view>
      <view class="item-container">
        <view class="ec-head">
          <view class="like-text header-text">点赞量</view>
          <view class="header-text right-text">{
       {likeDataCount.symbol}}{
       {likeDataCount.increase}}%</view>
        </view>
        <view class="ec-container">
          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec3 }}"></ec-canvas>
        </view>
      </view>
      <view class="item-container">
        <view class="ec-head">
          <view class="comment-text header-text">评论量</view>
          <view class="header-text right-text">{
       {commentDataCount.symbol}}{
       {commentDataCount.increase}}%</view>
        </view>
        <view class="ec-container">
          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec4 }}"></ec-canvas>
        </view>
      </view>
      <view class="item-container">
        <view class="ec-head">
          <view class="collect-text header-text">收藏量</view>
          <view class="header-text right-text">{
       {collectDataCount.symbol}}{
       {collectDataCount.increase}}%</view>
        </view>
        <view class="ec-container">
          <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec5 }}"></ec-canvas>
        </view>
      </view>
      <block wx:if="{ {isPost}}">
        <view class="item-container">
          <view class="ec-head">
            <view class="banner-text header-text">广告点击量</view>
            <view class="header-text right-text">{
       {bannerDataCount.symbol}}{
       {bannerDataCount.increase}}%</view>
          </view>
          <view class="ec-container">
            <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{ { ec6 }}"></ec-canvas>
          </view>
        </view>
      </block>
    </view>

// pages/analysisList/components/echartList/echartList.js
    import * as echarts from '../../../../components/ec-canvas/echarts';
    const app = getApp();
    
    var chart1 = null
    var chart2 = null
    var chart3 = null
    var chart4 = null
    var chart5 = null
    var chart6 = null
    
    Component({ 
      /** * 组件的属性列表 */
      properties: { 
        // 数据
        dataList: { 
          type: Object,
          value: { },
          observer: function (dataList) { 
            if (Object.keys(dataList).length !== 0) { 
              setTimeout(() => { 
                let browseData = dataList.BROWSE.list
                let transmitData = dataList.TRANSMIT.list
                let likeData = dataList.LIKE.list
                let commentData = dataList.COMMENT.list
                let collectData = dataList.COLLECT.list
    
                if (this.data.isPost) { 
                  var bannerData = dataList.BANNER.list
                }
                // 左上角数据
                this.setData({ 
                  browseDataCount: { 
                    increase: dataList.BROWSE.increase,
                    symbol: dataList.BROWSE.symbol
                  },
                  transmitDataCount: { 
                    increase: dataList.TRANSMIT.increase,
                    symbol: dataList.TRANSMIT.symbol
                  },
                  likeDataCount: { 
                    increase: dataList.LIKE.increase,
                    symbol: dataList.LIKE.symbol
                  },
                  commentDataCount: { 
                    increase: dataList.COMMENT.increase,
                    symbol: dataList.COMMENT.symbol
                  },
                  collectDataCount: { 
                    increase: dataList.COLLECT.increase,
                    symbol: dataList.COLLECT.symbol
                  },
                })
                if (this.data.isPost) { 
                  this.setData({ 
                    bannerDataCount: { 
                      increase: dataList.BANNER.increase,
                      symbol: dataList.BANNER.symbol
                    },
                  })
                }
                // 处理图表数据
                this.data.browseDataArr = []
                this.data.browseTimeArr = []
                browseData.forEach(item => { 
                  item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
                    this.setData({ 
                      browseDataArr: [...this.data.browseDataArr, item.num],
                      browseTimeArr: [...this.data.browseTimeArr, item.createTime],
                    })
                })
                this.data.transmitDataArr = []
                this.data.transmitTimeArr = []
                transmitData.forEach(item => { 
                  item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
                    this.setData({ 
                      transmitDataArr: [...this.data.transmitDataArr, item.num],
                      transmitTimeArr: [...this.data.transmitTimeArr, item.createTime]
                    })
                })
                this.data.likeDataArr = []
                this.data.likeTimeArr = []
                likeData.forEach(item => { 
                  item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
                    this.setData({ 
                      likeDataArr: [...this.data.likeDataArr, item.num],
                      likeTimeArr: [...this.data.likeTimeArr, item.createTime]
                    })
                })
                this.data.commentDataArr = []
                this.data.commentTimeArr = []
                commentData.forEach(item => { 
                  item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
                    this.setData({ 
                      commentDataArr: [...this.data.commentDataArr, item.num],
                      commentTimeArr: [...this.data.commentTimeArr, item.createTime]
                    })
                })
                this.data.collectDataArr = []
                this.data.collectTimeArr = []
                collectData.forEach(item => { 
                  item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
                    this.setData({ 
                      collectDataArr: [...this.data.collectDataArr, item.num],
                      collectTimeArr: [...this.data.collectTimeArr, item.createTime]
                    })
                })
                if (this.data.isPost) { 
                  this.data.bannerDataArr = []
                  this.data.bannerTimeArr = []
                  bannerData.forEach(item => { 
                    item.createTime = [(item.createTime.split('-'))[1], (item.createTime.split('-'))[2]].join('/'),
                      this.setData({ 
                        bannerDataArr: [...this.data.bannerDataArr, item.num],
                        bannerTimeArr: [...this.data.bannerTimeArr, item.createTime]
                      })
                  })
                }
                setTimeout(() => { 
                  this.runBrowseCanva()
                  this.runTransmitCanva()
                  this.runLikeCanva()
                  this.runCommentCanva()
                  this.runCollectCanva()
                  if (this.data.isPost) { 
                    this.runBannerCanva()
                  }
                }, 300)
              }, 200)
            }
          }
        },
        isPost: { 
          type: Boolean,
          value: false,
        }
      },
    
      /** * 组件的初始数据 */
      data: { 
        ec1: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart1 = echarts.init(canvas, null, { 
              width: width,
              height: height,
            });
            canvas.setChart(chart1);
            return chart1;
          }
        },
        ec2: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart2 = echarts.init(canvas, null, { 
              width: width,
              height: height
            });
            canvas.setChart(chart2);
            return chart2;
          }
        },
        ec3: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart3 = echarts.init(canvas, null, { 
              width: width,
              height: height
            });
            canvas.setChart(chart3);
            return chart3;
          }
        },
        ec4: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart4 = echarts.init(canvas, null, { 
              width: width,
              height: height
            });
            canvas.setChart(chart4);
            return chart4;
          }
        },
        ec5: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart5 = echarts.init(canvas, null, { 
              width: width,
              height: height
            });
            canvas.setChart(chart5);
            return chart5;
          }
        },
        ec6: { 
          // 初始化图表
          onInit: function (canvas, width, height) { 
            //初始化echarts元素，绑定到全局变量，方便更改数据
            chart6 = echarts.init(canvas, null, { 
              width: width,
              height: height
            });
            canvas.setChart(chart6);
            return chart6;
          }
        },
        browseDataArr: [],
        transmitDataArr: [],
        likeDataArr: [],
        commentDataArr: [],
        collectDataArr: [],
        bannerDataArr: [],
        browseTimeArr: [],
        transmitTimeArr: [],
        likeTimeArr: [],
        commentTimeArr: [],
        collectTimeArr: [],
        bannerTimeArr: [],
        browseDataCount: { 
          increase: '',
          symbol: ""
        },
        transmitDataCount: { 
          increase: '',
          symbol: ""
        },
        likeDataCount: { 
          increase: '',
          symbol: ""
        },
        commentDataCount: { 
          increase: '',
          symbol: ""
        },
        collectDataCount: { 
          increase: '',
          symbol: ""
        },
        bannerDataCount: { 
          increase: '',
          symbol: ""
        },
      },
    
      /** * 组件的方法列表 */
      methods: { 
        // 绘制浏览量
        runBrowseCanva() { 
          var option1 = { 
            color: ["#7EFF00"],
            // 以防y轴被压缩
            grid: { 
              y: 10
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              data: this.data.browseTimeArr,
              // show: false
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                show: false
              },
              axisLabel: { 
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            series: [{ 
              name: '浏览量',
              type: 'line',
              data: this.data.browseDataArr,
            }]
          };
          if (chart1) { 
            chart1.setOption(option1);
          }
        },
        // 绘制转发量
        runTransmitCanva() { 
    
          var option2 = { 
            color: ["#00FFCC"],
            // 以防y轴被压缩
            grid: { 
              y: 10
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              data: this.data.transmitTimeArr,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                show: false
              },
              axisLabel: { 
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            series: [{ 
              name: '转发量',
              type: 'line',
              data: this.data.transmitDataArr,
            }]
          };
          if (chart2) { 
            chart2.setOption(option2);
          }
        },
        // 绘制点赞量
        runLikeCanva() { 
          var option3 = { 
            color: ["#DE4040"],
            // 以防y轴被压缩
            grid: { 
              y: 10
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              data: this.data.likeTimeArr,
              // show: false
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                show: false
              },
              axisLabel: { 
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            series: [{ 
              name: '点赞量',
              type: 'line',
              data: this.data.likeDataArr,
            }]
          };
          if (chart3) { 
            chart3.setOption(option3);
          }
        },
        // 绘制评论量
        runCommentCanva() { 
          var option4 = { 
            color: ["#FFB400"],
            // 以防y轴被压缩
            grid: { 
              y: 10
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              data: this.data.commentTimeArr,
              // show: false
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                show: false
              },
              axisLabel: { 
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            series: [{ 
              name: '评论量',
              type: 'line',
              data: this.data.commentDataArr,
            }]
          };
          if (chart4) { 
            chart4.setOption(option4);
          }
        },
        // 绘制收藏量
        runCollectCanva() { 
          var option5 = { 
            color: ["#FF00FF"],
            // 以防y轴被压缩
            grid: { 
              y: 10
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              data: this.data.collectTimeArr,
              // show: false
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                show: false
              },
              axisLabel: { 
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            series: [{ 
              name: '收藏量',
              type: 'line',
              data: this.data.collectDataArr,
            }]
          };
          if (chart5) { 
            chart5.setOption(option5);
          }
        },
        // 绘制广告点击量
        runBannerCanva() { 
          var option6 = { 
            color: ["#ffffff"],
            // 以防y轴被压缩
            grid: { 
              y: 10
            },
            tooltip: { 
              show: true,
              trigger: 'axis'
            },
            xAxis: { 
              type: 'category',
              boundaryGap: false,
              axisLabel: { 
                show: true,
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              data: this.data.bannerTimeArr,
              // show: false
            },
            yAxis: { 
              type: 'value',
              splitLine: { 
                show: false
              },
              axisLabel: { 
                textStyle: { 
                  color: '#a1a1a1'
                }
              },
              // show: false
            },
            series: [{ 
              name: '广告点击量',
              type: 'line',
              data: this.data.bannerDataArr,
            }]
          };
          if (chart6) { 
            chart6.setOption(option6);
          }
        },
      },
    
    })

json

{ 
      "component": true,
      "usingComponents": { 
        "ec-canvas": "../../../../components/ec-canvas/ec-canvas"
      }
    }

/* pages/analysisList/components/echartList/echartList.wxss */
    .item-container { 
      height: 372rpx;
      background: #3a3a3a;
      margin: 25rpx;
    }
    .ec-head { 
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 28rpx 20rpx 28rpx;
      border-bottom: 1rpx solid #333;
    }
    
    .header-text { 
      font-size: 24rpx;
      line-height: 48rpx;
    }
    .right-text { 
      opacity: 0.6;
    }
    .bower-text { 
      color: #7EFF00;
    }
    .transmit-text { 
      color: #00FFCC;
    }
    .like-text { 
      color: #DE4040;
    }
    .comment-text { 
      color: #FFB400;
    }
    .collect-text{ 
      color: #FF00FF;
    }
    .banner-text { 
      color: #fff;
    }
    .ec-container { 
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      height: 280rpx;
      width: 700rpx;
    }
    
    ec-canvas { 
      width: 100%;
      height: 100%;
    }