ECharts pie chart (ring): how to display data proportion and structural changes

ECharts pie chart (ring): how to display data proportions and structural changes

ECharts is a JavaScript-based data visualization library that provides a variety of charts Types, including line chart, bar chart, scatter chart, map, etc. Among them, pie charts are a commonly used chart type that can be used to display the proportion and structural changes of data. This article will introduce how to use ECharts pie charts to display data proportions and structural changes, and provide specific code examples.

1. Data format

Before using ECharts pie chart, you need to prepare the data and convert the data format to the format required by ECharts. In a pie chart, the data format usually adopts the following method:

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

Among them, name represents the name of the data, and value represents the value of the data. It should be noted that the value in the data is generally of numeric type. If it is a string type, it needs to be converted using parseInt() or parseFloat().

2. Basic pie chart

The following demonstrates how to use ECharts to draw a basic pie chart. First, you need to introduce the ECharts library and theme, create a DOM element to display the chart, and initialize an ECharts instance. Then, set the basic configuration of the pie chart, including title, legend, color, etc. Finally, the data is passed into the pie chart for rendering.

HTML code:

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

JavaScript code:

// 引入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);

In the above code, the chart title, data tip, legend, pie chart radius, data, etc. are set. The effect of the pie chart is as shown below:

三, Ring Pie Chart

The ring pie chart is a variation of the basic pie chart. It can hollow out the center of the pie chart to form a ring shape. In ECharts, you can set the innerRadius property of the pie chart to achieve this effect. The example below shows how to draw a donut pie chart using ECharts.

HTML code:

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

JavaScript code:

// 创建一个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);

The above code is almost the same as the code for the basic pie chart, except that the innerRadius property is set in the series. The effect of this circular pie chart is as shown below:

4. Changes in data structure

In addition to showing the proportion of data, pie charts can also be used to show changes in data structure. In ECharts, this effect can be achieved by modifying and re-rendering the data. The following example demonstrates how to operate data in a pie chart to display the effect of changes in the data structure.

HTML code:

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

JavaScript code:

// 数据源
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);
});

In the above code, we define two data sources data1 and data2, which represent two different data structures respectively. . A click event is set up in the pie chart. When the pie chart is clicked, it will be judged based on the clicked data name. If the click is data 1 in data1, the data in legend and series will be modified into the data2 data structure, otherwise Modify it into data1 data structure. Finally, call the setOption() method to re-render the modified chart. The effect of this data structure change is shown in the figure below:

In summary, this article introduces how to use ECharts to draw pie charts and provides specific code examples. In addition to basic pie charts and ring pie charts, it also demonstrates how to operate data in pie charts to display the effects of data structure changes. Readers can make corresponding modifications and optimizations according to their own needs and data formats.

The above is the detailed content of ECharts pie chart (ring): how to display data proportion and structural changes. For more information, please follow other related articles on the PHP Chinese website!