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

微信小程序中使用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中

<view class="container">
	<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

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%;
}

多个图表

<!--pages/analysisList/components/echartList/echartList.wxml-->
<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%;
}