ECharts 円グラフ: データの比率を表示する方法

データ視覚化の広範な応用に伴い、優れた視覚化ライブラリである ECharts もますます注目を集めています。その中でも、円グラフはデータの割合を表示するために広く使用されています。この記事では、ECharts 円グラフを使用してデータの比率を表示する方法と、具体的なコード例を紹介します。

1. ECharts 円グラフの基本概念

まず、円グラフの基本概念を理解する必要があります。円グラフはデータの割合を表すためによく使用され、特定の値を角度サイズに変換し、セクター領域のサイズで表します。各セクターのサイズは、その数値に比例します。

2. ECharts 円グラフの実装方法

ECharts を使用して円グラフを描画するには、まず ECharts ライブラリを導入し、円を表示するために指定されたサイズの div タグを作成する必要があります。チャート。具体的なコードは以下の通りです。

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>

このうち、styleタグは円グラフを配置するdivタグのサイズを指定するために使用します。 script タグは、ECharts ライブラリの最小バージョンを導入します。

次に、JavaScript コードを使用して円グラフを実装する必要があります。具体的なコードは次のとおりです。

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data:['数据1', '数据2', '数据3']
  },
  series: [
    {
      name:'数据占比',
      type:'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'数据1'},
        {value:310, name:'数据2'},
        {value:234, name:'数据3'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

上記のコードでは、まず echarts.init() メソッドを使用して ECharts インスタンスを初期化します。次に、円グラフに必要なさまざまなプロパティとデータを定義する JavaScript オブジェクト オプションを定義します。最後に、setOption() メソッドを使用してこのオプション オブジェクトを ECharts インスタンスに適用し、円グラフを生成します。

具体的には、オプション オブジェクトには次の属性が含まれています:

1. title: 円グラフのタイトルの設定に使用されます;
2. tooltip: マウスの設定に使用されますフローティング時のプロンプト情報;
3. 凡例: 円グラフ内の各セクター領域のラベルを設定するために使用されます;
4. series: 円グラフ内の特定のデータ シリーズ (半径を含む) を設定するために使用されます。データ、スタイルなど

3. ECharts 円グラフのスタイル設定

基本的なデータ表示に加えて、ECharts 円グラフにはさまざまなスタイル設定オプションも用意されており、対応するデータを変更することで実現できます。さまざまなスタイルの円グラフ。

1. 内半径と外半径

半径属性を設定してセクター領域のサイズを制御し、円グラフの内半径と外半径を調整します。次のコード:

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '数据1'},
      {value: 310, name: '数据2'},
      {value: 234, name: '数据3'},
      {value: 135, name: '数据4'},
      {value: 1548, name: '数据5'}
    ]
  }
]

上記のコードでは、radius 属性に配列が含まれており、配列内の 2 つの値はそれぞれ内側半径と外側半径のパーセンテージを表します。この例では、内側の半径は 50%、外側の半径は 70% です。

2. 凡例の位置

凡例属性で x、y、orient 属性を設定して、凡例の位置と方向を調整します。次のコード:

legend: {
  x: 'left',
  y: 'center',
  orient: 'vertical',
  data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}

上記のコードでは、x 属性は凡例の水平位置を左に設定し、y 属性は凡例の垂直位置を中央に設定し、orient 属性は凡例の方向を垂直方向にします。

3. 影効果

itemStyle 属性に強調属性を設定することで、扇形の領域に影などの効果を追加し、視覚効果を高めることができます。円グラフ。次のコード:

itemStyle: {
  emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

上記のコードでは、shadowBlur は影のぼかし度を表し、shadowOffsetX とshadowOffsetY は影の水平および垂直オフセットを表し、shadowColor は影の色を表します。

4. ECharts 円グラフの例

以下に、上記の基本データとスタイル設定を含む特定の ECharts 円グラフの例を示します。コードは次のとおりです:

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
    title: {
      text: '饼图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data:['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:[
          {value:335, name:'数据1'},
          {value:310, name:'数据2'},
          {value:234, name:'数据3'},
          {value:135, name:'数据4'},
          {value:1548, name:'数据5'}
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>

この円グラフには次の機能が含まれています:

1. 凡例を追加し、凡例の位置を左上隅に調整しました;
2. マウス ホバーの追加 プロンプト ポップアップ ウィンドウにパーセンテージが表示されます。
3. は、マウス ホバー時のシャドウ効果を追加し、ハイライト効果を設定します。

上記は、ECharts 円グラフの基本的な実装といくつかのスタイル設定例の紹介であり、読者の皆様がこの記事を通じて ECharts 円グラフをある程度理解し、正しく適用できるようになることを願っています。実際の開発中。

以上がECharts 円グラフ: データの比率を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。