echartes 柱状图每跟柱子之间互不关联_echarts 不连续柱图-CSDN博客

本文链接：https://blog.csdn.net/qq_36869635/article/details/123796662

本文介绍了一种使用ECharts绘制复杂柱状图的方法，通过堆叠不同类别的数据并在每个类别下进一步细分来实现对比展示。该图表适用于展示多个分类间的数据比较及每个分类内部的细分情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我司近期有个图表功能，需求是柱形图没个分类比较，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)

          },