文檔：
https://echarts.apache.org/examples/zh/index.html#chart-type-pie
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分鐘上手之餅狀圖</title>
<!-- 引入 echarts.js -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大械挡！（寬高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom爱态，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '面積模式',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{value: 40, name: 'rose 1'},
{value: 38, name: 'rose 2'},
{value: 32, name: 'rose 3'},
{value: 30, name: 'rose 4'},
{value: 28, name: 'rose 5'},
{value: 26, name: 'rose 6'},
{value: 22, name: 'rose 7'},
{value: 18, name: 'rose 8'}
]
}
]
});
</script>
</body>
</html>
Echarts餅圖之-玫瑰圖數(shù)據(jù)交互
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入 echarts.js -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大心衤啤（寬高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
var names = []; //類別數(shù)組（用于存放餅圖的類別）
var brower = [];
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
//請求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對象
$.each(data, function(index, item) {
names.push(item.value); //挨個(gè)取出類別并填入類別數(shù)組
brower.push({
name: item.jobName,
value: item.jobNum
});
});
hrFun(brower);
},
});
// 基于準(zhǔn)備好的dom琉预，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
function hrFun(param) {
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
orient: 'vertical',
x: 'right',
y: 'bottom',
textStyle: { //圖例文字的樣式
color: '#0b2b5e',
fontSize: 12
},
data: ['在線', '離線']
},
series: [{
name: '面積模式',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
borderRadius: 8
},
data: brower,
}]
});
}
</script>
</body>
</html>
test.json
[{
"jobNum": 1,
"jobName": "設(shè)備經(jīng)理"
}, {
"jobNum": 1,
"jobName": "電氣操作"
}, {
"jobNum": 0,
"jobName": "ERP管理"
}, {
"jobNum": 1,
"jobName": "安全經(jīng)理"
}, {
"jobNum": 1,
"jobName": "生產(chǎn)經(jīng)理"
}, {
"jobNum": 1,
"jobName": "FKM車間主任"
}, {
"jobNum": 5,
"jobName": "操作工"
}, {
"jobNum": 1,
"jobName": "卸料員"
}, {
"jobNum": 2,
"jobName": "經(jīng)理"
}, {
"jobNum": 5,
"jobName": "成品檢測"
}, {
"jobNum": 2,
"jobName": "電氣管理"
}, {
"jobNum": 0,
"jobName": "倉庫"
}, {
"jobNum": 5,
"jobName": "主任"
}, {
"jobNum": 1,
"jobName": "設(shè)備副總"
}, {
"jobNum": 0,
"jobName": "默認(rèn)身份"
}, {
"jobNum": 2,
"jobName": "設(shè)備管理"
}, {
"jobNum": 1,
"jobName": "統(tǒng)計(jì)"
}, {
"jobNum": 1,
"jobName": "組長"
}, {
"jobNum": 3,
"jobName": "儀表"
}, {
"jobNum": 1,
"jobName": "公用"
}, {
"jobNum": 6,
"jobName": "叉車"
}, {
"jobNum": 1,
"jobName": "行政管理"
}, {
"jobNum": 2,
"jobName": "普工"
}, {
"jobNum": 1,
"jobName": "班長"
}, {
"jobNum": 2,
"jobName": "人力資源"
}, {
"jobNum": 1,
"jobName": "銷售"
}, {
"jobNum": 1,
"jobName": "聚合技術(shù)員"
}, {
"jobNum": 1,
"jobName": "工藝"
}, {
"jobNum": 4,
"jobName": "分析"
}, {
"jobNum": 1,
"jobName": "會計(jì)"
}, {
"jobNum": 5,
"jobName": "保潔"
}, {
"jobNum": 1,
"jobName": "技術(shù)副總"
}, {
"jobNum": 2,
"jobName": "安全管理員"
}, {
"jobNum": 1,
"jobName": "機(jī)修管理"
}, {
"jobNum": 2,
"jobName": "采購"
}, {
"jobNum": 2,
"jobName": "銷售后臺"
}, {
"jobNum": 5,
"jobName": "值班長"
}, {
"jobNum": 12,
"jobName": "后處理"
}, {
"jobNum": 1,
"jobName": "分析車間主任"
}, {
"jobNum": 1,
"jobName": "FEP車間主任"
}, {
"jobNum": 2,
"jobName": "工藝管理"
}, {
"jobNum": 4,
"jobName": "電工"
}, {
"jobNum": 0,
"jobName": "計(jì)量"
}, {
"jobNum": 18,
"jobName": "聚合"
}, {
"jobNum": 1,
"jobName": "倉庫管理"
}, {
"jobNum": 1,
"jobName": "后勤管理"
}, {
"jobNum": 1,
"jobName": "總經(jīng)理"
}, {
"jobNum": 1,
"jobName": "公用工程主任"
}, {
"jobNum": 1,
"jobName": "安全總監(jiān)"
}, {
"jobNum": 6,
"jobName": "中控分析"
}, {
"jobNum": 1,
"jobName": "成品檢測組長"
}, {
"jobNum": 2,
"jobName": "副主任"
}, {
"jobNum": 1,
"jobName": "單體技術(shù)員"
}, {
"jobNum": 1,
"jobName": "出納"
}, {
"jobNum": 1,
"jobName": "技術(shù)員"
}, {
"jobNum": 2,
"jobName": "環(huán)保管理員"
}, {
"jobNum": 2,
"jobName": "機(jī)修"
}, {
"jobNum": 2,
"jobName": "生產(chǎn)副總"
}, {
"jobNum": 6,
"jobName": "外操"
}, {
"jobNum": 1,
"jobName": "總經(jīng)理助理"
}, {
"jobNum": 1,
"jobName": "計(jì)量、ERP管理"
}]
