echarts 实现分组柱状图，且小组内自定义每一个bar的label
option = { color: ['#3e6591', '#eb7d22', '#d73f45'], grid: { left: 100 }, xAxis: { axisLine: { lineStyle: {color: '#ccc'} }, axisLabel: { textStyle: {color: '#777'} } }, yAxis: [{ inverse: true, splitLine: { show: true }, axisTick: { length: 0, lineStyle: {color: '#ccc'} }, axisLine: { lineStyle: {color: '#ccc'} }, data: ['-', '-', '-', '-', '-'] }], series: [{ type: 'bar', data:[220, 182, 191, 234, 290], label: { normal: { show: true, position: 'left', textStyle: {color: '#000'}, formatter: '合同金额', } } }, { type: 'bar', data:[210, 132, 91, 204, 220], label: { normal: { show: true, position: 'left', textStyle: {color: '#000'}, formatter: '已收款', } } }, { type: 'bar', data:[120, 132, 131, 254, 278], label: { normal: { show: true, position: 'left', textStyle: {color: '#000'}, formatter: '应收款', } } }]};例如：
相干代码：
initCharts() { let seriesArr = [] let detail = this.detail ? this.detail : '' let arr = [ [ { name: ['钻井总数', '射孔总数', '压裂总数'], data: [ { name: '钻井总数', value: detail.totalDrilling ? detail.totalDrilling - 0 : 0 }, { name: '射孔总数', value: detail.totalPerforate ? detail.totalPerforate - 0 : 0 }, { name: '压裂总数', value: detail.totalFracture ? detail.totalFracture - 0 : 0 } ] } ], [ { name: ['已完钻', '已射孔', '已投产'], data: [ { name: '已完钻', value: detail.finishingDrilling ? detail.finishingDrilling - 0 : 0 }, { name: '已射孔', value: detail.fractured ? detail.fractured - 0 : 0 }, { name: '已投产', value: detail.inProduction ? detail.inProduction - 0 : 0 } ] } ] ] arr.forEach((item, ind) => { seriesArr.push({ // name: item[0].name, type: 'bar', label: { normal: { show: true, position: 'bottom', textStyle: { color: '#000' }, formatter: (params, index) => { console.log(params, index) return params.data.name } } }, barWidth: 45, color: ind % 2 === 0 ? '#3FA7DC' : '#21a675', barGap: '20%', //每个柱子间距 barCategoryGap: '60%', // 一组柱子间距 // 一个data 是一个色彩的所有数据 蓝色 data: item[0].data }) }) // console.log('seriesArr=', seriesArr) // return // 基于筹备好的dom，初始化echarts实例 this.$nextTick(() => { this.myChartOptions = { xAxis: { name: '井数', type: 'category', nameGap: 30, nameLocation: 'middle', boundaryGap: true, // data: ['钻井总数', '已完钻', '射孔总数', '已射孔', '压裂总数', '已投产'], // data: ['钻井总数,已完钻', '射孔总数,已射孔', '压裂总数,已投产'], data: ['', '', ''], axisLabel: { show: true, textStyle: { margin: 20, fontSize: 14 }, formatter: (value, index) => { // console.log(222, value, index) return value } } }, tooltip: { trigger: 'axis', formatter: function(params) { // console.log('params=', params) var result = '' var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3FA7DC"></span>' var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#21a675"></span>' result += params[0].name + ',' + params[1].name + '</br>' + dotHtml + params[0].name + '：' + params[0].value + '</br>' + dotHtml2 + params[1].name + '：' + params[1].value return result } }, yAxis: { name: '井数(口)', position: 'left', nameGap: 30, nameLocation: 'center', axisTick: { show: true }, axisLine: { onZero: false, show: true // 显示坐标线 } }, series: seriesArr } this.myChart = this.$echarts.init(document.getElementById('main')) this.myChart.setOption(this.myChartOptions) }) // this.myChartOptions.dataset.source = this.energyConsumptionDataSource; // 应用刚指定的配置项和数据显示图表。 },