//创建ECharts图表方法
function DrawEChart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('main'))
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
})
//定义图表options
var options = {
title: {
text: "通过Ajax获取数据呈现图标示例",
subtext: "www.stepday.com",
sublink: "http://www.stepday.com/myblog/?Echarts"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
toolbox: {
show: true,
feature: {
mark: false
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: []
}
//通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: "/Ajax/GetChartData.aspx?type=getData&count=12",
dataType: "json", //返回数据形式为json
success: function (result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.xAxis[0].data = result.category
options.series = result.series
options.legend.data = result.legend
myChart.hideLoading()
myChart.setOption(options)
}
},
error: function (errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!")
}
})
}
参考:http://www.stepday.com/topic/?906
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)