function setChartPie(url,id){
var Chart=require('echarts').init(document.getElementById(id))
Chart.showLoading({text: '正在努力的读取数据中...' })
var label=[]
var value=[]
$.ajax({
url:url,
dataType:"json",
success:function(data){
$.each(data,function(i,p){
label[i]=p['label']
value[i]={'name':p['label'],'value':p['value']}
})
Chart.hideLoading()
optionPie.legend.data=label
optionPie.series[0]['data']=value
optionPie.series[0]['radius']=[0,100]
Chart.setOption(optionPie)
}
})
}
var myChart//创建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条)