Echarts.js :基本的常规图形相关
Esl.js :图像引擎
Statics文件夹下的ECharts.js文件,为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
2. 抽象之后的Echarts。
Echarts的使用归结为一下的几个步骤,同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js,该文件的主要代码目录如下:
[javascript] view plaincopy
Var ECharts={
ChartConfig:function(container,option){ …..},//加载Echarts配置文件
ChartDataFormate:{….},//数据格式化
ChartOptionTemplates:{….},//初始化常用的图表类型
Charts:{ RenderChart:function(option){….},//渲染图表
RenderMap:function(option){…}//渲染地图
}
}; 更多问题到问题求助专区http://bbs.houdunwang.com/
var json='[{name : "广州", value : 38}]'//后台返回的json串格式 var data = eval('('+json+')')//这个就是想要的格式 alert(data[0]['name'])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条)