echarts グループのネストされたヒストグラム

echarts グループのネストされたヒストグラム

最近、私は仕事で毎日 echart を扱っています。いくつかの難しい要件に遭遇することは避けられません。今日は、グループ化されたネストされたヒストグラムを共有します。まず、グループ化されたヒストグラムとは何かを理解しましょう。X- axis 複数の列になります echarts公式サイトの凡例に例が載っていますので、入れ子縦棒グラフとは何でしょうか？つまり、柱の内側に柱が巻かれているのですが、実際には2本の柱が重なっているので、外側の柱の幅を内側の柱の幅より広くする必要があります。次に、図を示します:

これはネストされたヒストグラムですが、X 軸にデータ項目が 2 つだけある場合にのみ適しています。この効果を実現するには、barGap 属性を直接使用できます。この属性はマージを意味します。では、X 軸に複数のデータ項目がある場合はどうなるでしょうか? この方法は適切ではありません。そうしないと、複数のデータ項目が 1 つの列にマージされてしまいます。では、どのような影響があるのでしょうか? 写真 (グループ化されたネストされたヒストグラム) に示すように:

色が見苦しいので、調整せずに誰でも簡単に見ることができます。笑、これはグループ化されたネストされたヒストグラムで、複数のデータがネストされています。実際、この効果は次のようなこともできます。 barGapで実現できましたが、さらに面倒です。バグが発生します。バグは、凡例項目をキャンセルすると列の位置がずれるというものです。とにかく納得できないので、別の解決策を採用します(絵文字ヒストグラム図)、デモ コードについて話しましょう。

//下面就是上图的配置项，关键部分有注释
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]
    },
  ]
};

絵文字ヒストグラムはグラフィックを自分で指定する必要があります。デフォルトの設定では制限があります。それでも不十分な場合は、外部リンクのグラフィックを自分で導入する必要があります。角丸効果のみが必要なので、選択したグラフィック タイプは円です, 設定は繰り返されません。次に、数値を 1 に設定します。これは円を長くするのと同じなので、丸みを帯びた効果が得られます。対応する列が重なるように位置を調整すると、2 つの列の幅は次のようになります。利点は、凡例の任意の項目をクリックしてキャンセルするだけで、柱の位置がずれることがないことです。この問題に遭遇した方にはご理解いただけると思いますが、何かご不明な点がございましたらお気軽にご連絡ください、いつもありがとうございます。ははは