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 } ] } ] }) }