3.4.1.餅圖的實現步驟
16.餅圖的實現.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代碼結構
//2. 准備數據[{name:???, value:??? },{}]
// 淘寶: 11231 京東: 22673 唯品會: 6123 1號店: 8989 聚美優品: 6700
//3. 將type的值設置為pie
var mCharts = echarts.init(document.querySelector("div"))
// pieData就是需要設置給餅圖的數據, 數組,數組中包含一個又一個的對象, 每一個對象中, 需要有name和value
var pieData = [
{
name: '淘寶',
value: 11231
},
{
name: '京東',
value: 22673
},
{
name: '唯品會',
value: 6123
},
{
name: '1號店',
value: 8989
},
{
name: '聚美優品',
value: 6700
}
]
var option = {
series: [
{
type: 'pie',
data: pieData
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
3.4.2.餅圖的常見效果
17.餅圖的常見效果.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代碼結構
//2. 准備數據[{name:???, value:??? },{}]
// 淘寶: 11231 京東: 22673 唯品會: 6123 1號店: 8989 聚美優品: 6700
//3. 將type的值設置為pie
var mCharts = echarts.init(document.querySelector("div"))
// pieData就是需要設置給餅圖的數據, 數組,數組中包含一個又一個的對象, 每一個對象中, 需要有name和value
var pieData = [
{
name: '淘寶',
value: 11231
},
{
name: '京東',
value: 22673
},
{
name: '唯品會',
value: 6123
},
{
name: '1號店',
value: 8989
},
{
name: '聚美優品',
value: 6700
}
]
var option = {
series: [
{
type: 'pie',
data: pieData,
label: { // 餅圖文字的顯示
show: true, // 顯示文字
//formatter: 'hehe' // 決定文字顯示的內容
formatter: function (arg) {
// console.log(arg)
// return `${arg.name} ${arg.value}元\n ${arg.percent}%`
return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
}
},
// radius: 20 // 餅圖的半徑
// radius: '20%' // 百分比參照的是寬度和高度中較小的那一部分的一半來進行百分比設置
// radius: ['50%', '75%'] // 第0個元素代表的是內圓的半徑 第1個元素外圓的半徑
roseType: 'radius', // 南丁格爾圖 餅圖的每一個區域的半徑是不同的
// selectedMode: 'single' // 選中的效果,能夠將選中的區域偏離圓點一小段距離
selectedMode: 'multiple',
selectedOffset: 30
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
