Echarts 2.0 动态加载数据
2016-12-20 本文已影响0人
慕童
有个项目用到了Echarts 的动态数据加载，自己折腾了半天才做出来，所以在这里记录一些东西，在此之前也通过搜索引擎学习了解了一些，这里直接看一下我实现的过程。
这里后端的数据默认就已经正确无误的传到前台了，下面是实现功能的一个简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax加载数据</title>
<style type="text/css">
#content {
position: fixed;
left: 300px;
top: 100px;
width: 600px;
height: 400px;
border: solid 1px #6A5ACD;
}
</style>
</head>
<body>
<div id="content"></div>
<script src="javascript/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('content'));
// 在这里模拟了json格式的数据，实际项目中使用ajax 请求得到。
var list = [
{"areaId": "1", "areaName": "下沙", "areaCount": 123},
{"areaId": "2", "areaName": "下城", "areaCount": 145},
{"areaId": "3", "areaName": "空港", "areaCount": 134}
];
var oData = [];
for (var i = 0; i < list.length; i++) {
oData.push({value: list[i].areaCount, name: list[i].areaName});
}
var option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: oData
}
]
};
option.series.data = oData;
myChart.setOption(option)
/*
*/
</script>
</body>
</html>
后记
Echarts 2.0 动态加载数据，一般来说加载的都是legend中data，series 中data，等的数据，对于像我这样的新手来说，可能就是JS处理起来有些困难，其他都还好。Echarts 使用了一段时间，不算太难，二次开发成本比较低，基本是拿来就可以修改修改使用的，我这样想也许是我只做了一些简单的图表，以后还得多学习了解。
PS：如果哪里有错误或者不足，烦请指出来，我们一起学习进步，感谢。
