您的位置：首页 > 其它

echarts在.Net中使用实例(二) 使用ajax动态加载数据

2017-01-05 18:32 801 查看

通过上一篇文章可以知道和echarts参考手册可知，series字段就是用来存储我们显示的数据，所以我们只需要用ajax来获取series的值就可以.

option

名称	描述
{color}backgroundColor	全图默认背景，（详见backgroundColor），支持rgba，默认为无，透明
{Array} color	数值系列的颜色列表，（详见color），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage	非IE8-支持渲染为图片，（详见renderAsImage）
{boolean}calculable	是否启用拖拽重计算特性，默认关闭，（详见calculable，相关的还有 calculableColor， calculableHolderColor，nameConnector， valueConnector）
{boolean}animation	是否开启动画，默认开启，（详见 animation，相关的还有 addDataAnimation， animationThreshold，animationDuration， animationDurationUpdate ， animationEasing）
{Object} timeline	时间轴（详见timeline），每个图表最多仅有一个时间轴控件
{Object} title	标题（详见title），每个图表最多仅有一个标题控件
{Object} toolbox	工具箱（详见toolbox），每个图表最多仅有一个工具箱
{Object} tooltip	提示框（详见tooltip），鼠标悬浮交互时的信息提示
{Object} legend	图例（详见legend），每个图表最多仅有一个图例，混搭图表共享
{Object}dataRange	值域选择（详见dataRange）,值域范围
{Object}dataZoom	数据区域缩放（详见dataZoom）,数据展现范围选择
{Object}roamController	漫游缩放组件（详见roamController）,搭配地图使用
{Object} grid	直角坐标系内绘图网格（详见grid）
{Array \| Object}xAxis	直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴
{Array \| Object}yAxis	直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴
{Array} series	驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据

首先定义一个Serial类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>

</head>
<body>
<div id="main" style=" height:400px;"></div>

</body>
</html>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data: ['Actual', 'Budget']
},
xAxis: [
{
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}
],
yAxis: [
{
type: 'value'//Y轴显示的类型,默认为value
}
],
series: []
};
//ajax动态获取数据
$.ajax({
type: 'post',
url: 'ajax.ashx?action=ShowChart',
data: {},
dataType: 'json',
async: false,
success: function (result) {
if (result) {
// 获取json值
option.series = result.series;
// 为echarts对象加载数据
myChart.setOption(option);
}
},
error: function () {
alert("Error");
}
});

}
);
</script>

所见即所得

当然，最后奉上源码！

源代码下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航