西宁的网站建设公司/二十条优化
前面写到一个关于Echarts饼状图交互数据的例子，但是当时name是写死的，现在的value和name都是需要从后端获取，然后渲染在界面，大致的json数据是这样的：
模拟一个json格式的数据：
{"list":[{"value":"管理","name":40},
{"value":"炼钢工","name":30},
{"value":"焊工","name":36},
{"value":"操作工","name":31}]}
开始写ajax+json数据模拟一个demo，仅供参考，代码如下：
html>
<html>
<head>
<meta charset="utf-8">
<title>饼状图数据交互title>
<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>
<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}
{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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。