ECharts 円グラフ (リング): データの割合と構造の変化を表示する方法

ECharts 円グラフ (リング): データの割合と構造の変化を表示する方法

ECharts は、さまざまな種類のグラフを提供する JavaScript ベースのデータ視覚化ライブラリです。折れ線グラフ、棒グラフ、散布図、地図などが含まれます。中でも円グラフは、データの割合や構造の変化を表示するためによく使われるグラフの種類です。この記事では、ECharts 円グラフを使用してデータの割合と構造の変化を表示する方法を紹介し、具体的なコード例を示します。

1. データ形式

ECharts 円グラフを使用する前に、データを準備し、データ形式を ECharts で必要な形式に変換する必要があります。円グラフでは、通常、データ形式は次のような形式が採用されます。

data:[
  {name:'数据1',value:100},
  {name:'数据2',value:200},
  {name:'数据3',value:300},
  {name:'数据4',value:400}
]

このうち、nameはデータの名前を表し、valueはデータの値を表します。なお、データ内の値は通常数値型ですが、文字列型の場合はparseInt()やparseFloat()を使用して変換する必要があります。

2. 基本的な円グラフ

以下では、ECharts を使用して基本的な円グラフを描画する方法を示します。まず、ECharts ライブラリとテーマを導入し、グラフを表示するための DOM 要素を作成し、ECharts インスタンスを初期化する必要があります。次に、タイトル、凡例、色など、円グラフの基本構成を設定します。最後に、データはレンダリングのために円グラフに渡されます。

HTML コード:

<div id="pie1" style="width: 600px;height:400px;"></div>

JavaScript コード:

// 引入ECharts库和主题
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

// 创建一个DOM元素用于显示图表
var chart1 = echarts.init(document.getElementById('pie1'),'macarons');

// 设置饼图的基本配置
var option1 = {
  title: {
    text: '基本饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart1.setOption(option1);

上記のコードでは、グラフのタイトル、データヒント、凡例、円グラフの半径、データなどが設定されています。 。円グラフの効果は次のとおりです。

3、リング円グラフ

リング円グラフは基本的な円グラフのバリエーションで、円グラフの中心をくり抜いてリング形状を形成できます。 ECharts では、円グラフの innerRadius プロパティを設定して、この効果を実現できます。以下の例は、ECharts を使用してドーナツ円グラフを描画する方法を示しています。

HTML コード:

<div id="pie2" style="width: 600px;height:400px;"></div>

JavaScript コード:

// 创建一个DOM元素用于显示图表
var chart2 = echarts.init(document.getElementById('pie2'),'macarons');

// 设置饼图的基本配置
var option2 = {
  title: {
    text: '环形饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      // 设置内半径
      innerRadius:'50%'
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart2.setOption(option2);

上記のコードは、innerRadius プロパティが設定されている点を除いて、基本的な円グラフのコードとほぼ同じです。シリーズ。この円形の円グラフの効果は次のとおりです。

4. データ構造の変化

データの割合を示すだけでなく、データ構造の変化を示すために円グラフを使用することもできます。 ECharts では、データを変更して再レンダリングすることでこの効果を実現できます。次の例は、円グラフ内のデータを操作して、データ構造の変更の影響を表示する方法を示しています。

HTML コード:

<div id="pie3" style="width: 600px;height:400px;"></div>

JavaScript コード:

// 数据源
var data1 = [
  {value:100, name:'数据1'},
  {value:200, name:'数据2'},
  {value:300, name:'数据3'},
  {value:400, name:'数据4'}
];
var data2 = [
  {value:450, name:'数据5'},
  {value:250, name:'数据6'},
  {value:200, name:'数据7'},
  {value:150, name:'数据8'}
];

// 创建一个DOM元素用于显示图表
var chart3 = echarts.init(document.getElementById('pie3'),'macarons');

// 设置饼图的基本配置
var option3 = {
  title: {
    text: '数据结构变化示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:data1,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      innerRadius:'50%'
    }
  ]
};

// 将数据1传入到饼图中进行渲染
chart3.setOption(option3);

// 点击事件
chart3.on('click', function (params) {
  // alert(params.name);
  if(params.name=='数据1'){
    option3.legend.data = ['数据5','数据6','数据7','数据8'];
    option3.series[0].data = data2;
  }else{
    option3.legend.data = ['数据1','数据2','数据3','数据4'];
    option3.series[0].data = data1;
  }
  chart3.setOption(option3);
});

上記のコードでは、2 つのデータ ソース data1 と data2 を定義し、それぞれ 2 つの異なるデータ構造を表します。円グラフにクリックイベントを設定します 円グラフがクリックされるとクリックされたデータ名で判定します クリックがデータ1のデータ1であれば凡例と系列のデータがデータ2に変更されますデータ構造、それ以外の場合は data1 データ構造に変更します。最後に、setOption() メソッドを呼び出して、変更したグラフを再レンダリングします。このデータ構造変更の影響を次の図に示します。

要約すると、この記事では、ECharts を使用して円グラフを描画する方法を紹介し、具体的なコード例を示します。基本的な円グラフとリング円グラフに加えて、円グラフでデータを操作してデータ構造の変更の影響を表示する方法も示します。読者は、独自のニーズとデータ形式に従って、対応する変更と最適化を行うことができます。

以上がECharts 円グラフ (リング): データの割合と構造の変化を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。