JS-ECharts-フロントエンド チャート マルチレベル結合円グラフ、縦棒積み上げチャート、縦棒/折れ線組み合わせチャート、トレンド チャート、カスタム正中線、平均線、バブル ノート ポイント

このブログのバックグラウンドはJavaScriptです。ECharts オンライン コーディングをすぐに始めて、関連するフロントエンド視覚化チャートを描画します。
ECharts 公式ウェブサイト: https://echarts.apache.org/zh/index.html

その他の推奨事項:
AntV: https://antv.vision/zh
chartcube: https://chartcube.alipay.com/make

1.円グラフ

1.1 通常の円グラフ

円グラフは、データ コンテンツの分類と割合を表示できます。
カテゴリのコメント内容はカスタマイズできます (名前 + 値 + パーセンテージを使用)。分類色はカスタマイズ可能です。

コード例は次のとおりです。

option = {
    
    
  title: {
    
    
    //图表标题填写位置
    text: '图表标题',
    //图表副标题填写位置
    subtext: '副标题',
    //图表标题位置；center表示居中
    left: 'center'
  },
  tooltip: {
    
    
    trigger: 'item'
  },
  legend: {
    
    
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
    
    
      type: 'pie',
      //调整图表在页面相对大小
      radius: '60%',
       label: {
    
    
                        normal: {
    
    
                            show: true,
                            //自定义色块备注，名称+值+百分比
                            formatter: '{b}:{c}' + '个\n\r' + '({d}%)'
                        }
                    },
      data: [
        {
    
     value: 8, name: 'A' },
        {
    
     value: 6, name: 'B' },
        {
    
     value: 3, name: 'C' },
        {
    
     value: 2, name: 'D' },
        {
    
     value: 7, name: 'E' },
        {
    
     value: 1, name: 'F' },
        {
    
     value: 1, name: 'G' },
        {
    
     value: 1, name: 'H' },
        {
    
     value: 5, name: 'I' },
        //数量较多会循环使用之前的颜色，所以加上,itemStyle:{color来自定义颜色
        {
    
     value: 13, name: 'J' ,itemStyle:{
    
    color:'#FF7F80'}},
        {
    
     value: 10, name: 'K' ,itemStyle:{
    
    color:'#A52A4A'}}
      ],
      emphasis: {
    
    
        itemStyle: {
    
    
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

1.2 多段円グラフ/2 段円グラフ

マルチレベル円グラフでは、データ分類を表示し、データ内容の分類と相関関係をドリルダウンできます。
1次元の水平比較、2次元の水平比較、1次元を基準とした2次元の水平比較、1次元を基準とした2次元の拡張表示という多段階から直感的に表示できます。
データ コンテンツの分類とそれに対応する割合をカスタマイズできます。また、データの分類と 2 番目の次元の割合もカスタマイズできます。

コード例は次のとおりです。

option = {
    
    
  textStyle: {
    
    
      color: '#999',
      fontWeight: 'normal',
      //调整图表中字体大小
      fontSize: 15
    },
    toolbox: {
    
    
    feature: {
    
    
      dataView: {
    
     show: true, readOnly: false },
      magicType: {
    
     show: true, type: ['line', 'bar'] },
      restore: {
    
     show: true },
      saveAsImage: {
    
     show: true }
    }
  },
  title: {
    
    
    //图表标题填写位置
    text: '图表标题',
    //图表副标题填写位置
    subtext: '副标题',
    //图表标题位置；left表示左靠齐
    left: 'left'
  },
  legend: {
    
    
    orient: 'vertical',
    left: 'left'
  },
            series: {
    
    
               itemStyle: {
    
    
        borderColor: '#fff',
        borderWidth: 3
      },
                type: 'sunburst',
                //调整图表在页面相对大小
                 radius: '99%',
                 //调整图表在页面整体位置
                  center: ['50%', '50%'],
                  //图表数据，一个对象为一个色块
                data: [{
    
    
                  //第1部分的色块名
                    name: '1',
                    //第1部分的的值，对应占比大小
                    value: 2.2,
                    children: [{
    
    
                      //第1部分外圈的名称
                        name: '1.2',
                        //第1部分外圈的值，对应其在该色块中占比大小
                        value: 1.2
                    },
                    {
    
    
                        name: '1.3',
                        value: 0.2
                    },
                    {
    
    
                        name: '1.1',
                        value: 0.8
                    }]
                }, {
    
    
                    name: '2',
					          value:1.8,
					          children: [{
    
    
                        name: '2.1',
                        value: 0.9
                    },
                    {
    
    
                        name: '2.2',
                        value: 0.1
                    },
                    {
    
    
                        name: '2.3',
                        value: 0.8
                    }]
                },
                {
    
    
                    name: '3',
                    value: 0.3,
                    children: [{
    
    
                        name: '3.1',
                        value: 0.075
                    },
                    {
    
    
                        name: '3.2',
                        value: 0.15
                    },
                    {
    
    
                        name: '3.3',
                        value: 0.075
                    }
                    ]
                },
                ]
            }
        };

2. ヒストグラム

2.1 縦棒積み上げグラフ

ヒストグラムとデータ積層ヒストグラムでは、このバッチ内のデータ分類とデータの詳細な分割と割合を視覚的に表示できます。
スタッキングタイプをカスタマイズしたり、データの分類や比率をカスタマイズしたりすることができます。二重 Y 軸グラフ。

コード例は次のとおりです。

const Colors = {
    
    
  'United States': '#b22234'
};
option = {
    
    
  title: {
    
    
    //图表标题填写位置
    text: '图表标题',
    //图表副标题填写位置
    subtext: '副标题',
    //图表标题位置；left表示左靠齐
    left: 'left'
  },
  tooltip: {
    
    
    trigger: 'axis',
    axisPointer: {
    
    
      type: 'shadow'
    }
  },
  toolbox: {
    
    
    feature: {
    
    
      dataView: {
    
     show: true, readOnly: false },
      magicType: {
    
     show: true, type: ['line', 'bar'] },
      restore: {
    
     show: true },
      saveAsImage: {
    
     show: true }
    }
  },
  legend: {
    
    },
  grid: {
    
    
    //整个图表距离页面最左侧的相对距离
    left: '3%',
    right: '4%',
    //整个图表距离页面顶部的相对距离
    top:'18%',
    bottom: '3%',
    containLabel: true
  },
  //横坐标
  xAxis: [
    {
    
    
      type: 'category',
      //横坐标名称
      data: ['A1', 'A2','A3','A4','A5','A6','A7',
    ],
    axisLabel: {
    
    
      interval: 0,
      //横坐标倾斜程度
      rotate: 30
    }
    }
  ],
  //纵坐标，这儿是双纵坐标
  yAxis: [
    {
    
    
      type: 'value',
      //纵坐标名称
      name: '数量1',
    },
    {
    
    
      type: 'value',
      name: '数量2',
      //纵坐标最小值
      //min: 0,
      //纵坐标最大值
      //max: 10000,
      //纵坐标数据间隔
      //interval: 800,
    }
  ],
  series: [
    {
    
    
      //数据分类名称
      name: 'B1',
      type: 'bar',
      //color: '#76be77',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        //柱状图上展示具体数值
        show: true
      },
      data:[123,34,77,34,43,546,113]
    },
    {
    
    
      name: 'C1',
      type: 'bar',
      //柱状图数据堆叠效果
      stack: 'Ad',
      //color: '#a90000',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data:[583,182,203,36,93,709,888]
    },
    {
    
    
      name: 'C2',
      stack: 'Ad',
      type: 'bar',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data:[165,8,12,6,30,112,223]
    },
    {
    
    
      name: 'D1',
      yAxisIndex: 1,
      type: 'bar',
      //数据堆叠在不同柱子，根据stack的名称区分
      stack: 'Ad2',
      //color: '#a90000',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data:[17579,5788,5774,5044,3715,4811,2288]
    },
    {
    
    
      name: 'D2',
      yAxisIndex: 1,
      stack: 'Ad2',
      type: 'bar',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data:[1533,146,1140,480,809,70,22]
    },
    {
    
    
      name: 'D3',
      yAxisIndex: 1,
      stack: 'Ad2',
      type: 'bar',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data:[7101,470,502,641,6650,10418,5026]
    },
    {
    
    
      name: 'D4',
      yAxisIndex: 1,
      stack: 'Ad2',
      type: 'bar',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data:[0,0,0,0,0,0,3923]
    }
  ]  
};

3. トレンドチャート

3.1 バンプマップ

対応するデータの長期的な状況、傾向、最大値、最小値を表示できます。
データの分類、注釈点の内容、座標点の位置をカスタマイズできます。

コード例は次のとおりです。

option = {
    
    
  title: {
    
    
    //图表标题填写位置
    text: '图表标题',
    //图表副标题填写位置
    subtext: '副标题',
  },
  tooltip: {
    
    
    trigger: 'axis'
  },
  legend: {
    
    
    data: ['A', 'B', 'C', 'D', 'E','F'
    ],
    orient: 'vertical',
    left: 'left',
    top:'7%',
  },
   toolbox: {
    
    
    show: true,
    feature: {
    
    
      dataZoom: {
    
    
        yAxisIndex: 'none'
      },
      dataView: {
    
     readOnly: false },
      magicType: {
    
     type: ['line', 'bar','stack'] },
      restore: {
    
    },
      saveAsImage: {
    
    }
    }
  },
  grid: {
    
    
    //整个图表距离页面最左侧的相对距离
    left: '5%',
    right: '4%',
    //整个图表距离页面底部的相对距离
    bottom: '3%',
    containLabel: true
  },
  //横坐标
  xAxis: {
    
    
    type: 'category',
    boundaryGap: false,
    //横坐标的名称
    data: ['2022-7-1', '2022-7-2', '2022-7-3', '2022-7-4', '2022-7-5', '2022-7-6', '2022-7-7',
    '2022-7-8','2022-7-9','2022-7-10','2022-7-11','2022-7-12','2022-7-13','2022-7-14',
    '2022-7-15','2022-7-16','2022-7-17','2022-7-18','2022-7-19','2022-7-20',
    '2022-7-21','2022-7-22','2022-7-23','2022-7-24','2022-7-25',
    '2022-7-26','2022-7-27','2022-7-28','2022-7-29','2022-7-30','2022-7-31'
    ],
    axisLabel: {
    
    
      interval: 0,
      //横坐标名称倾斜程度
      rotate: 30
    }
  },
  //纵坐标
  yAxis: {
    
    
    type: 'value',
    //纵坐标最小值
    min: 0,
    //纵坐标最大值
    max: 2,
  },
  series: [
    {
    
    
      name: 'A',
      smooth: true,
      //增加该曲线的备注点
      markPoint: {
    
    
        data: [
          //备注点的名称，展示内容，坐标点
          {
    
     name: 'markPoint', value: 'A', xAxis: 9, yAxis: 1,
          symbolSize:150,
          }
        ],
      },
      type: 'line',
      label: {
    
    
        show: true
      },
      //该曲线对应横坐标的具体数值
      data: [0,0,0,0,0,1,1,0,0,0,
      0,0,0,0,1,
      0,0,0,0,0,
      0,0,0,0,1,
      0,0,0,0,0,0
      ]
    },
    {
    
    
      name: 'B',
      smooth: true,
      markPoint: {
    
    
        data: [
          {
    
     name: 'markPoint', value: 'B', xAxis: 9, yAxis: 1,
          symbolSize:160,
          }
        ],
      },
      type: 'line',
      label: {
    
    
        show: true
      },
      data: [0,0,0,0,0,0,1,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,0
      ]
    },
    {
    
    
      name: 'C',
      smooth: true,
      markPoint: {
    
    
        data: [
          {
    
     name: 'markPoint', value: 'C', xAxis: 9, yAxis: 1,
          symbolSize:150,
          }
        ],
      },
      type: 'line',
      label: {
    
    
        show: true
      },
      data: [0,0,0,0,0,0,0,1,0,0,
      0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,0
      ]
    },
    {
    
    
      name: 'D',
      smooth: true,
      markPoint: {
    
    
        data: [
          {
    
     name: 'markPoint', value: 'D', xAxis: 9, yAxis: 1,
          symbolSize:150,
          }
        ],
      },
      type: 'line',
      label: {
    
    
        show: true
      },
      data: [0,0,0,0,1,0,1,0,0,0,
      0,0,0,1,0,
      0,0,0,0,0,
      0,0,0,0,0,
      1,0,0,1,0,0
      ]
    },
    {
    
    
      name: 'E',
      smooth: true,
      type: 'line',
      label: {
    
    
        show: true
      },
      data: [0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,
      0,0,0,0,0,0
      ]
    },
    {
    
    
      name: 'F',
      smooth: true,
      markPoint: {
    
    
        data: [
          {
    
     name: 'markPoint', value: 'F', xAxis: 9, yAxis: 1,
          symbolSize:150,
          }
        ],
      },
      type: 'line',
      label: {
    
    
        show: true
      },
      data: [1,0,0,0,0,0,0,0,0,0,
      1,0,0,0,0,
      0,0,1,1,0,
      0,0,0,0,1,
      0,1,1,0,0,0
      ]
    }
  ]
};

3.2 折れ線グラフ

折れ線グラフはデータの変動と傾向をより適切に表示でき、最大値をすぐに確認できます。
値と正中線の平均はカスタマイズできます。

コード例は次のとおりです。

const Colors = {
    
    
  'United States': '#b22234'
};
option = {
    
    
  title: {
    
    
    //图表标题填写位置
    text: '图表标题',
    //图表副标题填写位置
    subtext: '副标题',
    //图表标题位置；left表示左靠齐
    left: 'left'
  },
  tooltip: {
    
    
    trigger: 'axis',
    axisPointer: {
    
    
      type: 'shadow'
    }
  },
  toolbox: {
    
    
    feature: {
    
    
      dataView: {
    
     show: true, readOnly: false },
      magicType: {
    
     show: true, type: ['line', 'bar'] },
      restore: {
    
     show: true },
      saveAsImage: {
    
     show: true }
    }
  },
  legend: {
    
    },
  grid: {
    
    
    //整个图表距离页面最左侧的相对距离
    left: '3%',
    right: '4%',
    //整个图表距离页面顶部的相对距离
    top:'18%',
    bottom: '3%',
    containLabel: true
  },
  //纵坐标
  xAxis: [
    {
    
    
      type: 'category',
      //纵坐标名称
      data: ['2022-7-1', '2022-7-2', '2022-7-3', '2022-7-4', '2022-7-5',
      '2022-7-6', '2022-7-7','2022-7-8','2022-7-9','2022-7-10',
      '2022-7-11','2022-7-12','2022-7-13','2022-7-14','2022-7-15',
      '2022-7-16','2022-7-17','2022-7-18','2022-7-19','2022-7-20',
    '2022-7-21','2022-7-22','2022-7-23','2022-7-24','2022-7-25',
    '2022-7-26','2022-7-27','2022-7-28','2022-7-29','2022-7-30'
    ],
    axisLabel: {
    
    
      interval: 0,
      rotate: 30
    }
    }
  ],
  //横坐标
  yAxis: [
    {
    
    
      type: 'value',
      //纵坐标名称
      name: '单位1',
    },
    {
    
    
      type: 'value',
      name: '单位2',
      //纵坐标最小值
      //min: 0,
      //max: 100,
      //纵坐标间隔
      interval: 20,
    }
  ],
  series: [
    {
    
    
      name: '数据1',
      type: 'line',
      yAxisIndex: 1,
      markLine: {
    
    
        //平均线
        data: [{
    
     type: 'average', name: 'Avg' }]
      },
      label: {
    
    
        //展示折线点对应的数据
        show: true,
        //数据展示位置，right展示在点的右边
        position: 'right',
      },
      data: [99.59, 114.71, 85.92, 58.9, 83.63, 101.49, 86.82, 79.3, 95.04, 234.91, 41.62, 62.23, 113.63, 97.76, 83.83, 164.91, 108.76, 68.58, 90.65, 89.06, 68.08, 66.28, 233.1, 107.23, 60.1, 72.76, 113.96, 89.59, 86.8, 100]
    },
    {
    
    
      name: '数据2',
      type: 'line',
      yAxisIndex: 1,
      markLine: {
    
    
        data: [{
    
     type: 'average', name: 'Avg' }]
      },
      label: {
    
    
        show: true,
        position: 'right',
      },
      data: [28.0, 15.28, 21.47, 17.38, 142.15, 24.43, 13.14, 32.45, 19.19, 11.81, 5.68, 7.69, 3.67, 16.34, 5.2, 14.82, 28.38, 19.25, 22.4, 11.46, 2.69, 20.27, 34.78, 19.64, 10.72, 22.71, 13.94, 12.23, 10.78, 14.45]
    }
  ]  
};

4. 組み合わせチャート

4.1 棒グラフ+折れ線グラフ
棒グラフと折れ線グラフの形式により、データの総量、分類、データの傾向が簡単にわかります。
カスタマイズ可能なデータ、カテゴリ、二重 Y 軸、データ リマーク ポイントなど。

コード例は次のとおりです。

option = {
    
    
  title: {
    
    
    //图表标题填写位置
    text: '图表标题',
    //图表副标题填写位置
    subtext: '副标题',
    //图表标题位置；left表示左靠齐
    left: 'left'
  },
  tooltip: {
    
    
    trigger: 'axis',
    axisPointer: {
    
    
      type: 'shadow'
    }
  },
  legend: {
    
    },
  grid: {
    
      
    //整个图表距离页面最左侧的相对距离
    left: '3%',
    right: '4%',
   //整个图表距离页面顶部的相对距离
    top:'18%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    
    
    feature: {
    
    
      dataView: {
    
     show: true, readOnly: false },
      magicType: {
    
     show: true, type: ['line', 'bar'] },
      restore: {
    
     show: true },
      saveAsImage: {
    
     show: true }
    }
  },
 //横坐标
  xAxis: [
    {
    
    
      type: 'category',
      //横坐标的名称
      data: ['A', 'B', 'C', 'D', 'E','F',
    'G','H','I','J','K','L',
    "N","M"],
    axisLabel: {
    
    
      interval: 0,
      //横坐标名称倾斜程度
      rotate: 30
    }
    }
    
  ],
//纵坐标,双纵坐标
  yAxis: [
    {
    
    
      type: 'value',
      //纵坐标名称
      name: '数量',
    },
    {
    
    
      type: 'value',
      name: '百分比',
      //纵坐标最小值
      min: 0,
      max: 100,
      //纵坐标间隔
      interval: 20,
      axisLabel: {
    
    
        //纵坐标加单位
      formatter: '{value} %'
      }
    }
  ],
  series: [
    {
    
    
      name: '数量1',
      type: 'bar',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data: [4,1,1,6,0,
      8,7,10,1,0,
      1,2,1,1]
    },
    {
    
    
      name: '数量2',
      type: 'bar',
      emphasis: {
    
    
        focus: 'series'
      },
      label: {
    
    
        show: true
      },
      data: [4,1,1,6,0,
      7,6,10,1,0,
      1,2,1,1]
    },
    {
    
    
      name: '百分比',
      markPoint: {
    
    
        data: [
          //备注点的名称，展示内容，坐标点
          {
    
     name: 'markPoint', value: 'A', xAxis: 6, yAxis: 84,
          symbolSize:90,
          itemStyle:{
    
    
            //指定颜色
              color:'#DC143C'
          }
          },
          {
    
     name: 'markPoint', value: 'B', xAxis: 5, yAxis: 89,
          symbolSize:100,
          itemStyle:{
    
    
              color:'#DC143C'
          },
          }
        ],
      },
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
    
    
        valueFormatter: function (value) {
    
    
          return value + ' %';
        }
      },
      color:'#a90000',
      label: {
    
    
        show: true,
        position: 'right',
      },
      data: [100,100,100,100,100,
      88,86,100,100,100,
      100,100,100,100]
    }
  ]  
};