ecahrt table+柱状图

1.首先循环画板

<el-table-column
                      prop="electricity"
                      label="节超"
                      width="500px"
                    >
                      <template slot-scope="scope">
                  //id的唯一性
                        <div :id='`chart${scope.row.index}`' class="chart"></div>
                      </template>
                    </el-table-column>

  created () {
//因为他是表格里面的画板，画板还没有生成获取不到
//所以要在nextTick函数中初始化
    this.$nextTick(function () {
      let self = this
      self.tableData.forEach((value, index) => {
        this.drawBarChart(value, index + 1)
      })
    })
  },

2.数据的初始化

    drawBarChart (value, index) {
      // 基于准备好的dom，初始化echarts实例
      let chartType = this.getValueType(value.electricity)
      let drawBarChart = this.$echarts.init(document.getElementById('chart' + index))
      // 绘制图表
      drawBarChart.setOption({
        tooltip: {
          show: false
        },
        grid: chartType.grid,
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: chartType.data,
          axisLine: {
            show: true,
            lineStyle: {//y轴的颜色
              type: 'solid',
              color: '#fff',
               '1'
            }
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                formatter: '{c|{c}}{d|万kwh}',  //自定义柱状图上面显示的文字
                rich: {//文字上的样式
                  c: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#fff'
                  },
                  d: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: '#fff'
                  }
                }
              }
            },
            barWidth: 40,//每个柱子的宽度
            itemStyle: {
              normal: {
                shadowColor: chartType.shadowColor, //阴影
                shadowBlur: 15,//阴影的范围
                barBorderRadius: chartType.barBorderRadius,//柱状体的圆角
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ //渐变色
                  { offset: 0.2, color: chartType.color1 },
                  { offset: 1, color: chartType.color0 }
                ]),
                label: { //柱状体中文字的显示位置
                  show: true,
                  position: chartType.position,
                  textStyle: {
                    color: '#ffffff',
                    fontSize: '16px'
                  }
                }
              }
            },
            data: [
              { value: value.electricity,label: chartType.labelRight }
            ]
          }
        ]
      })
    }