文档：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管理" }]
