您的位置:首页 > 其它

Echarts动态加载图表数据

2017-11-18 00:00 585 查看
使用echarts动态加载数据,以折线图为例。

1.引入echarts相关的js

2.html

<div id="Chart" style="width:600px; height: 300px;"></div>

3.js

//1.初始化echarts
var showChart = echarts.init(document.getElementById('Chart'), 'macarons');

//2.图表参数、样式
var option = {
title: {
text: 'XXX个数统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []//动态加载折线名称
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['今天', '本周', '本月', '本季度', '今年', '所有']
}
],
yAxis: [
{
type: 'value'
}
],
series: []//动态加载折线数据
};

//3.ajax返回后台数据,获取图标数据
function getData() {
var strUrl = 'GetStatistics?uIds=' + uId;
$.ajax({
url:strUrl,    //请求的url地址
//dataType:"json",   //返回格式为json
async:false,//请求是否异步,默认为异步,这也是ajax重要特性
type:"GET",   //请求方式 get 或者post
success:function(result){ //请求成功时处理
if (result != null) {
if (result.length > 0) {
//定义折线名称、类型、数据
var Item = function(){
return {
name:'',
type:'line',
data:[]
}
};
var legends = [];
var series  = [];

for (var i = 0; i < result.length; i++) {
var list = result[i].Today + "," +result[i].Week + "," +
result[i].Month + "," + result[i].Quarter + "," +
result[i].Year + "," + result[i].All;
var showlist = list.split(',');

var it = new Item();
it.name = result[i].userName;
legends.push(result[i].userName);
it.data = showlist;
series.push(it);
}

option.legend.data = legends;
option.series = series; // 设置图表
showChart.setOption(option);// 重新加载图表
}
}
},
});
}

//4.返回图标数据结果
getData();

//5.渲染图表
showChart.setOption(option);

推荐链接:http://blog.csdn.net/verne_feng/article/details/51731653
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息