histograma aninhado do grupo echarts

histograma aninhado do grupo echarts

Recentemente, tenho lidado com echarts todos os dias no trabalho e é inevitável que eu encontre alguns requisitos difíceis. O que vou compartilhar com você hoje é um histograma aninhado agrupado. Vamos primeiro entender o que é um histograma agrupado, que é um Eixo X Haverá várias colunas.Existem exemplos na legenda do site oficial do echarts, então o que é um gráfico de colunas aninhadas? Ou seja, há uma coluna enrolada dentro da coluna.Na verdade, as duas colunas se sobrepõem e a largura da coluna externa é maior do que a largura da coluna interna. Em seguida, deixe-me mostrar uma imagem:

este é um histograma aninhado, mas é adequado apenas quando há apenas dois itens de dados no eixo X. Podemos usar diretamente o atributo barGap para obter esse efeito. Esse atributo significa mesclagem. E se tivermos vários itens de dados no eixo X? Este método não é adequado, caso contrário, vários itens de dados serão mesclados em uma coluna, então, de que efeito estou falando? Como mostrado na imagem (histograma aninhado agrupado):

a cor é feia, então é fácil para todos verem sem ajustar. Haha, este é um histograma aninhado agrupado, com vários dados aninhados. Na verdade, esse efeito também pode ser alcançado com barGap, mas é mais problemático. Haverá bugs. O bug é que quando cancelamos qualquer item de legenda, a posição da coluna será extraviada. De qualquer forma, não posso aceitar, então adoto outra solução ( diagrama pictográfico de histograma) e vamos falar sobre o código de demonstração:

//下面就是上图的配置项，关键部分有注释
option = {
    
    
  title: {
    
    
    text: '业绩报表'
  },
  tooltip: {
    
    
    trigger: 'axis',
    axisPointer: {
    
    
      type: 'shadow'
    }
  },
  legend: {
    
    },
  grid: {
    
    
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    
    
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    
    
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  series: [
    {
    
    //里层的柱子
      name: '销售部A组',
      type: 'pictorialBar',//象形柱状图
      barWidth:30,//柱子的宽度
      data: [72, 79,70, 67, 59],//柱子的数据
      symbol:'circle',//柱子的形状
      symbolRepeat:true,//是否重复
      symbolOffset: [-30, 0],//柱子的位置
      symbolBoundingData:1,//图形的个数
      z:12//柱子的层级
    },
    {
    
     //外层的柱子
        name: "销售部B组",
        type: "pictorialBar",
        barWidth:50,
        //symbolSize: [40, 18], //调整截面形状
        symbolOffset: [-40, 0],
        symbol:'circle',
        symbolRepeat:true,
        symbolBoundingData:1,
        itemStyle: {
    
    
                color: ''
        },
        data: [82, 89,90, 97, 79]
    },
    {
    
    //里面的柱子
      name: '营销部A组',
      type: 'pictorialBar',
      data: [73, 80, 71, 75, 64],
      barWidth:30,
      symbol:'circle',
      symbolRepeat:true,
      symbolOffset: [40, 0],
      symbolBoundingData:1,
      z:12
    },
    {
    
     //外面的柱子
      name: "营销部B组",
      type: "pictorialBar",
      barWidth:50,
      //symbolSize: [40, 18], //调整截面形状
      symbolOffset: [30, 0],
      symbol:'circle',
      symbolRepeat:true,
      symbolBoundingData:1,
      itemStyle: {
    
    
          color:''
      },
      data: [82, 89, 89, 97, 79]
    },
  ]
};

O histograma pictográfico precisa especificar os gráficos por você. A configuração padrão é limitada. Se não for suficiente para você, você mesmo precisa introduzir os gráficos vinculados externamente. Eu só preciso de um efeito de canto arredondado, então o tipo de gráfico selecionado é círculo , e as configurações não são repetidas. Em seguida, defina o número como um, o que equivale a alongar um círculo, para que haja um efeito arredondado. Ao ajustar a posição para fazer as colunas correspondentes se sobreporem e, em seguida, a largura das duas colunas é diferente, o efeito obtido é assim, a vantagem é que clicamos em qualquer item da legenda para cancelar, e a posição do pilar não será extraviada. Se você encontrar esse problema, acredito que possa entendê-lo. Se tiver alguma dúvida, sinta-se à vontade para se comunicar. Obrigado por cada encontro. hahaha