Echarts饼图之-玫瑰图数据交互
文档： 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准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
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饼图之-玫瑰图数据交互
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准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
var names = []; //类别数组（用于存放饼图的类别）
var brower = [];
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
$.each(data, function(index, item) {
names.push(item.value); //挨个取出类别并填入类别数组
brower.push({
name: item.jobName,
value: item.jobNum
});
});
hrFun(brower);
},
});
// 基于准备好的dom，初始化echarts实例
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": "设备经理"
}, {
"jobNum": 1,
"jobName": "电气操作"
}, {
"jobNum": 0,
"jobName": "ERP管理"
}, {
"jobNum": 1,
"jobName": "安全经理"
}, {
"jobNum": 1,
"jobName": "生产经理"
}, {
"jobNum": 1,
"jobName": "FKM车间主任"
}, {
"jobNum": 5,
"jobName": "操作工"
}, {
"jobNum": 1,
"jobName": "卸料员"
}, {
"jobNum": 2,
"jobName": "经理"
}, {
"jobNum": 5,
"jobName": "成品检测"
}, {
"jobNum": 2,
"jobName": "电气管理"
}, {
"jobNum": 0,
"jobName": "仓库"
}, {
"jobNum": 5,
"jobName": "主任"
}, {
"jobNum": 1,
"jobName": "设备副总"
}, {
"jobNum": 0,
"jobName": "默认身份"
}, {
"jobNum": 2,
"jobName": "设备管理"
}, {
"jobNum": 1,
"jobName": "统计"
}, {
"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": "聚合技术员"
}, {
"jobNum": 1,
"jobName": "工艺"
}, {
"jobNum": 4,
"jobName": "分析"
}, {
"jobNum": 1,
"jobName": "会计"
}, {
"jobNum": 5,
"jobName": "保洁"
}, {
"jobNum": 1,
"jobName": "技术副总"
}, {
"jobNum": 2,
"jobName": "安全管理员"
}, {
"jobNum": 1,
"jobName": "机修管理"
}, {
"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": "计量"
}, {
"jobNum": 18,
"jobName": "聚合"
}, {
"jobNum": 1,
"jobName": "仓库管理"
}, {
"jobNum": 1,
"jobName": "后勤管理"
}, {
"jobNum": 1,
"jobName": "总经理"
}, {
"jobNum": 1,
"jobName": "公用工程主任"
}, {
"jobNum": 1,
"jobName": "安全总监"
}, {
"jobNum": 6,
"jobName": "中控分析"
}, {
"jobNum": 1,
"jobName": "成品检测组长"
}, {
"jobNum": 2,
"jobName": "副主任"
}, {
"jobNum": 1,
"jobName": "单体技术员"
}, {
"jobNum": 1,
"jobName": "出纳"
}, {
"jobNum": 1,
"jobName": "技术员"
}, {
"jobNum": 2,
"jobName": "环保管理员"
}, {
"jobNum": 2,
"jobName": "机修"
}, {
"jobNum": 2,
"jobName": "生产副总"
}, {
"jobNum": 6,
"jobName": "外操"
}, {
"jobNum": 1,
"jobName": "总经理助理"
}, {
"jobNum": 1,
"jobName": "计量、ERP管理"
}]
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读