Echarts饼状图交互数据
前面写到一个关于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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。 原文详情：【编程微刊】公众号
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.09.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读