Data Visualization----ECharts-Pie Chart (6)
Baidu Encyclopedia - Pie Chart
Echarts series of articles
| title | address |
|---|---|
| Echarts first experience | Portal |
| General configuration of Echarts | Portal |
| histogram | Portal |
| line chart | Portal |
| Scatterplot | Portal |
| Echarts official website | Portal |
Basic implementation of pie chart
Implementation steps
1. Build the most basic code structure of ECharts (this is the first step necessary to realize any chart)
- Import the js file (this js file can be downloaded from the official website)
- Prepare a DOM container
- Initialize an echarts object
You can see the specific operation on setting the configuration item option
2. Prepare data:
- The outermost layer of the group of data is an array
- Each element of the array is an object
- Each object contains two attributes: name and value
- For example: [{name:'breakfast',value:'10'},{name:'lunch',value:'30'}]
3. Chart type:
- Set the type under series in the configuration item to pie
4. Code implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饼状图的基本实现</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
// 1.Echarts 基本结构的创建
// 引入js文件---创建容器---初始化对象---配置配置项---
// 2.准备数据[{name;???, value:???},{}]
// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
// 3.将type设置为pie
var myCharts = echarts.init(document.querySelector('#app'))
// 需要设置给饼图的数据
var pieData = [
{
name: '运动与健康',
value: '1100'
},
{
name: '餐饮',
value: '2800'
},
{
name: '外出与旅行',
value: '4500'
},
{
name: '衣物',
value: '2202'
},
{
name: '电子游戏',
value: '2421'
},
{
name: '医药',
value: '800'
}
]
var option = {
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
series: [
{
type: 'pie',
data: pieData
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
The renderings are as follows:
Common Effect Configurations for Pie Charts
1. Text display (note that this configuration is not unique to pie charts, it can also be used in bar charts, line charts, maps and other charts), we only need to add the following configuration under series:
label: {
//饼图文字的显示
show: true, //默认 显示文字
formatter: function (arg) {
console.log(arg);
return arg.name + ' 消费 ' + arg.value + " 元" +'\n'+ arg.percent + "%"
}
}
After adding this configuration in the series, the effect diagram:
Regarding the formatter, here are some supplements:
formatter: used to format the legend text, supporting common strings, string templates, and callback functions.
Example:
// 使用普通字符串
formatter: 'Legend'
// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
return 'Legend ' + name;
}
2. Radius and ring effect:
To set the radius of the pie chart, you need to add a configuration item radius under the series, and its value can be
- exact number (unit: px
- Percentage (relatively calculated here is half of the DOM container width, high school and small one)
- Array (set two radii to achieve the effect of a ring)
// 在600x400的DOM容器中下面两个配置的图标大小是相同的
radius: 40 //饼图的半径
radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
ring effect
//圆环
radius: ['50%','80%']
Effect picture:
3. Nightingale picture:
- Baidu Encyclopedia – Nightingale Rose Diagram : The main effect of the Nightingale diagram is that our pie chart radius display will be different depending on the value corresponding to different regions
- To realize the Nightingale diagram, you only need to add this line of code under the series: roseType: 'radius'
Look at the renderings:
4. Selected effect:
// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30
The effect picture below is to set the selectedMode to multiple. If you are interested, you can try single, and you can also change the value of selectedOffset to see what the effect is.
Renderings:
Finally, the old rules, the complete code is here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饼状图的基本实现</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
// 1.Echarts 基本结构的创建
// 引入js文件---创建容器---初始化对象---配置配置项---
// 2.准备数据[{name;???, value:???},{}]
// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
// 3.将type设置为pie
var myCharts = echarts.init(document.querySelector('#app'))
// 需要设置给饼图的数据
var pieData = [
{
name: '运动与健康',
value: '1100'
},
{
name: '餐饮',
value: '2800'
},
{
name: '外出与旅行',
value: '4500'
},
{
name: '衣物',
value: '2202'
},
{
name: '电子游戏',
value: '2421'
},
{
name: '医药',
value: '800'
}
]
var option = {
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
series: [
{
type: 'pie', // 类型： 饼图
data: pieData,//数据
label: {
//饼图文字的显示
show: true, //默认 显示文字
formatter: function (arg) {
console.log(arg);
return arg.name + ' 消费 ' + arg.value + " 元" +'\n'+ arg.percent + "%"
}
},
// radius: 20 //饼图的半径
// radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
// 圆环
// radius: ['50%','80%']
// 南丁格尔图 饼图的每一个部分的半径是不同的
// roseType: 'radius',
// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>