ECharts pie chart: how to display data proportions

With the widespread application of data visualization, ECharts, an excellent visualization library, has also received more and more attention. Among them, pie charts are widely used to display the proportion of data. This article will introduce how to use ECharts pie charts to display data proportions and provide specific code examples.

1. Basic concepts of ECharts pie charts

First of all, we need to understand the basic concepts of pie charts. Pie charts are often used to represent the proportion of data. Specific values ​​are converted into angle sizes, and then represented by the size of the sector area. The size of each sector is proportional to their numerical value.

2. How to implement ECharts pie chart

To use ECharts to draw a pie chart, you need to first introduce the ECharts library and create a div tag with a specified size to display the pie chart. The specific code is as follows:

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

Among them, the style tag is used to specify the size of the div tag where the pie chart is located. The script tag introduces the min version of the ECharts library.

Then, we need to implement the pie chart through JavaScript code. The specific code is as follows:

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);

In the above code, we first use the echarts.init() method to initialize the ECharts instance. Then, we define a JavaScript object option, which defines various properties and data needed in the pie chart. Finally, we use the setOption() method to apply this option object to the ECharts instance to generate a pie chart.

Specifically, the option object contains the following attributes:

1. title: used to set the title of the pie chart;
2. tooltip: used to set the mouse Prompt information when floating;
3. legend: used to set the label of each sector area in the pie chart;
4. series: used to set the specific data series in the pie chart, including radius, data , style, etc.

3. Style setting of ECharts pie chart

In addition to basic data display, ECharts pie chart also provides a variety of style setting options, which can be achieved by modifying the corresponding properties. Pie charts in different styles.

1. Inner and outer radius

Adjust the inner and outer radius of the pie chart by setting the radius attribute to control the size of the sector area. The following code:

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'}
    ]
  }
]

In the above code, the radius attribute contains an array, and the two values ​​in the array represent the percentage of the inner and outer radius respectively. In this example, the inner radius is 50% and the outer radius is 70%.

2. Legend position

Adjust the position and direction of the legend by setting the x, y, and orient attributes in the legend attribute. The following code:

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

In the above code, the x attribute sets the horizontal position of the legend to the left, the y attribute sets the vertical position of the legend to the center, and the orient attribute sets the direction of the legend to the vertical direction.

3. Shadow effect

By setting the emphasis attribute in the itemStyle attribute, you can add shadow and other effects to the fan-shaped area to enhance the visual effect of the pie chart. The following code:

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

In the above code, shadowBlur represents the blur degree of the shadow, shadowOffsetX and shadowOffsetY represent the horizontal and vertical offset of the shadow, and shadowColor represents the color of the shadow.

4. ECharts Pie Chart Example

Below, we give a specific ECharts pie chart example, which contains the basic data and style settings mentioned above. The code is as follows:

<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>

This pie chart includes the following features:

1. Added a legend and adjusted the legend position to the upper left corner;
2. Added mouse hover The prompt pop-up window shows the percentage;
3. adds a shadow effect and sets a highlight effect when the mouse is hovering.

The above is an introduction to the basic implementation of ECharts pie charts and some style setting examples. I hope readers can have a certain understanding of ECharts pie charts through this article and be able to apply them correctly in actual development.

The above is the detailed content of ECharts pie chart: how to display data proportions. For more information, please follow other related articles on the PHP Chinese website!