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',               width: '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 }             ]           }         ]       })     }