Echarts饼状图交互数据
- 2019 年 10 月 7 日
- 筆記
前面写到一个关于Echarts饼状图交互数据的例子，但是当时name是写死的，现在的value和name都是需要从后端获取，然后渲染在界面，大致的json数据是这样的： 模拟一个json格式的数据：
{"list":[{"value":"管理","name":40}, {"value":"炼钢工","name":30}, {"value":"焊工","name":36}, {"value":"操作工","name":31}]}
开始写ajax+json数据模拟一个demo，仅供参考，代码如下：
<!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: 400px;height:300px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); function hrFun(param) { myChart.setOption({ tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { /* orient: 'vertical', x: 'right', y: 'bottom', textStyle: { //图例文字的样式 color: '#0b2b5e', fontSize: 12 },*/ }, series: [{ name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, data: [ ] }] }); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names = []; //类别数组（用于存放饼图的类别） var brower = []; $.ajax({ type: 'get', url: 'data.json', //请求数据的地址 dataType: "json", //返回数据形式为json success: function(result) { //请求成功时执行该函数内容，result即为服务器返回的json对象 $.each(result.list, function(index, item) { names.push(item.value); //挨个取出类别并填入类别数组 brower.push({ name: item.value, value: item.name }); }); myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 legend: { data: names }, series: [{ data: brower }] }); }, error: function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }); } hrFun(); </script> </body> </html>
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。 原文详情：【编程微刊】公众号
