Home > Article > Web Front-end > 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:
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.
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%.
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.
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:
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!