vue项目中折线图的渲染

本文以echart5.0版本实现，4.0版本引入详见柱状图引入

import * as echarts from 'echarts'
export default {
  data () {
    return {
    	echartsData: {'2021-03-03': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight': 0, 'count': 0, 'sort': 1}, {'type_id': 'b84b760ec02a11eaa8a9000c29d3cc31', 'type_name': '餐厨垃圾', 'weight': 0, 'count': 0, 'sort': 2}, {'type_id': 'b8c900bac02a11eaa8a9000c29d3cc31', 'type_name': '其他垃圾', 'weight': 0, 'count': 0, 'sort': 3}, {'type_id': 'b88403d4c02a11eaa8a9000c29d3cc31', 'type_name': '可回收物', 'weight': 0, 'count': 0, 'sort': 4}, {'type_id': 'b9e7b14ec02a11eaa8a9000c29d3cc31', 'type_name': '有害垃圾', 'weight': 0, 'count': 0, 'sort': 5}, {'type_id': 'b90018f2c02a11eaa8a9000c29d3cc31', 'type_name': '大件垃圾', 'weight': 0, 'count': 0, 'sort': 6}], '2021-03-04': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight': 0, 'count': 0, 'sort': 1}, {'type_id': 'b84b760ec02a11eaa8a9000c29d3cc31', 'type_name': '餐厨垃圾', 'weight': 0, 'count': 0, 'sort': 2}, {'type_id': 'b8c900bac02a11eaa8a9000c29d3cc31', 'type_name': '其他垃圾', 'weight': 0, 'count': 0, 'sort': 3}, {'type_id': 'b88403d4c02a11eaa8a9000c29d3cc31', 'type_name': '可回收物', 'weight': 0, 'count': 0, 'sort': 4}, {'type_id': 'b9e7b14ec02a11eaa8a9000c29d3cc31', 'type_name': '有害垃圾', 'weight': 0, 'count': 0, 'sort': 5}, {'type_id': 'b90018f2c02a11eaa8a9000c29d3cc31', 'type_name': '大件垃圾', 'weight': 0, 'count': 0, 'sort': 6}], '2021-03-05': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight': 0, 'count': 0, 'sort': 1}, {'type_id': 'b84b760ec02a11eaa8a9000c29d3cc31', 'type_name': '餐厨垃圾', 'weight': 0, 'count': 0, 'sort': 2}, {'type_id': 'b8c900bac02a11eaa8a9000c29d3cc31', 'type_name': '其他垃圾', 'weight': 0, 'count': 0, 'sort': 3}, {'type_id': 'b88403d4c02a11eaa8a9000c29d3cc31', 'type_name': '可回收物', 'weight': 0, 'count': 0, 'sort': 4}, {'type_id': 'b9e7b14ec02a11eaa8a9000c29d3cc31', 'type_name': '有害垃圾', 'weight': 0, 'count': 0, 'sort': 5}, {'type_id': 'b90018f2c02a11eaa8a9000c29d3cc31', 'type_name': '大件垃圾', 'weight': 0, 'count': 0, 'sort': 6}], '2021-03-06': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight': 0, 'count': 0, 'sort': 1}, {'type_id': 'b84b760ec02a11eaa8a9000c29d3cc31', 'type_name': '餐厨垃圾', 'weight': 0, 'count': 0, 'sort': 2}, {'type_id': 'b8c900bac02a11eaa8a9000c29d3cc31', 'type_name': '其他垃圾', 'weight': 0, 'count': 0, 'sort': 3}, {'type_id': 'b88403d4c02a11eaa8a9000c29d3cc31', 'type_name': '可回收物', 'weight': 0, 'count': 0, 'sort': 4}, {'type_id': 'b9e7b14ec02a11eaa8a9000c29d3cc31', 'type_name': '有害垃圾', 'weight': 0, 'count': 0, 'sort': 5}, {'type_id': 'b90018f2c02a11eaa8a9000c29d3cc31', 'type_name': '大件垃圾', 'weight': 0, 'count': 0, 'sort': 6}], '2021-03-07': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight': 0, 'count': 0, 'sort': 1}, {'type_id': 'b84b760ec02a11eaa8a9000c29d3cc31', 'type_name': '餐厨垃圾', 'weight': 0, 'count': 0, 'sort': 2}, {'type_id': 'b8c900bac02a11eaa8a9000c29d3cc31', 'type_name': '其他垃圾', 'weight': 0, 'count': 0, 'sort': 3}, {'type_id': 'b88403d4c02a11eaa8a9000c29d3cc31', 'type_name': '可回收物', 'weight': 0, 'count': 0, 'sort': 4}, {'type_id': 'b9e7b14ec02a11eaa8a9000c29d3cc31', 'type_name': '有害垃圾', 'weight': 0, 'count': 0, 'sort': 5}, {'type_id': 'b90018f2c02a11eaa8a9000c29d3cc31', 'type_name': '大件垃圾', 'weight': 0, 'count': 0, 'sort': 6}]}
    }
  },

  methods: {
    init () {
      let xData = [] // X轴
      let legendData = [] // 图例
      let serieData = [] // echarts总数据

	  // x轴刻度
      xData = Object.keys(this.echartsData)

      // 获取图例
      for (let i in this.echartsData) {
        this.echartsData[i].forEach((item, index) => {
          legendData.push(item.type_name)
        })
      }

      // 获取每一个小数组
      legendData.forEach(item => {
        serieData.push({
          name: item,
          type: 'line',
          // stack: '完成率',
          data: []
        })
      })

      // 获取每个serieData的data
      for (let i in this.echartsData) {
        this.echartsData[i].forEach((item, index) => {
          // console.log(serieData[index].data, item.sort)
          serieData[index].data.push(item.sort)
        })
      }
      this.initChart(xData, serieData, legendData)
    },
    initChart (xData, serieData, legendData) {
      // console.log(xData, serieData, legendData)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: serieData
      }
      let chart = echarts.init(this.$refs.dataContrast)
      chart.setOption(option)
      window.addEventListener('resize', function () {
        chart.resize()
      })
    }
  },
  mounted () {
    this.init()
  }
}