我司近期有個圖表功能，需求是柱形圖沒個分類比較，BUT 每個分類里面還有小類型，不同分類之間的小類型之間互不相關。

苦思良久，干

drawCharts(data){let _this = this;let tjs = [];let jsyd = [];let nyd = [];let wlyd = [];let legend = [];data[4].map((item)=>{let series = {name: item.elx,type:'bar',stack:'總量',data:[item.area],yAxisIndex:0,barWidth:20,itemStyle:{color: _this.colorChoose(item.elx)}}tjs.push(series);legend.push(item.elx);})data[3].map((item)=>{let series = {name: item.elx,type:'bar',stack:'總量2',data:[0,item.area],yAxisIndex:1,barWidth:20,itemStyle:{color: _this.colorChoose(item.elx)}}jsyd.push(series);legend.push(item.elx);})data[2].map((item)=>{let series = {name: item.elx,type:'bar',stack:'總量4',data:[0,0,0,item.area],yAxisIndex:3,barWidth:20,itemStyle:{color: _this.colorChoose(item.elx)}}wlyd.push(series);legend.push(item.elx);})data[1].map((item)=>{let series = {name: item.elx,type:'bar',stack:'總量3',data:[0,0,item.area],yAxisIndex:2,barWidth:20,itemStyle:{color: _this.colorChoose(item.elx)}}nyd.push(series);legend.push(item.elx);})let chart = this.$echarts.init(document.getElementById('txChart'));let option = {tooltip: {show : true,// trigger: 'axis'formatter: function(params, ticket, callback) {return(params.name +"<br/>" +params.seriesName+":" +params.value+'公頃')}},grid: {top: '40px',left: '65px',right: '30px',bottom: '30px',},legend: {data: legend,type: 'scroll'},xAxis: {type: 'value',axisTick:{show:false}},yAxis: [{show:true,position:'left',data:['特交水' + '\n(' + data.cjEntity.txTjsmj + ')','建設用地' + '\n(' + data.cjEntity.txJsydmj + ')','農用地' + '\n(' + data.cjEntity.txNydmj + ')','未利用地' + '\n(' + data.cjEntity.txWlydmj + ')',],axisTick:{show:false}},{show:false,position:'left',data:['特交水' + '\n(' + data.cjEntity.txTjsmj + ')','建設用地' + '\n(' + data.cjEntity.txJsydmj + ')','農用地' + '\n(' + data.cjEntity.txNydmj + ')','未利用地' + '\n(' + data.cjEntity.txWlydmj + ')',],},{show:false,position:'left',data:['特交水' + '\n(' + data.cjEntity.txTjsmj + ')','建設用地' + '\n(' + data.cjEntity.txJsydmj + ')','農用地' + '\n(' + data.cjEntity.txNydmj + ')','未利用地' + '\n(' + data.cjEntity.txWlydmj + ')',],},{show:false,position:'left',data:['特交水' + '\n(' + data.cjEntity.txTjsmj + ')','建設用地' + '\n(' + data.cjEntity.txJsydmj + ')','農用地' + '\n(' + data.cjEntity.txNydmj + ')','未利用地' + '\n(' + data.cjEntity.txWlydmj + ')',],}],series: [...tjs,...jsyd,...nyd, ...wlyd]};chart.setOption(option)},

解決 開心

效果如上

總結

以上是生活随笔為你收集整理的echartes 柱状图 每跟柱子之间互不关联的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。