[Author]: kwu
高速基于echarts的大数据可视化，echarts纯粹的js实现的图表工具。高速开发的过程例如以下：
1、引入echarts的依赖js库
<script type="text/javascript" src="js/esl/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
2、设置展示的div
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 300px"></div>
3、画图的JS
var myChart;
var option; // 绘图
function drawCharts(echartsHomePath) {
// 路径配置
require.config({
paths : {
echarts : echartsHomePath +'js'
}
}) // 使用
require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function(
ec) {
myChart = ec.init(document.getElementById('main')); //官网复制option 開始 option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
}; //官网复制option 结束
myInterval(restPath);
});
} //填充数据
function setResult(result, option, myChart) {
if (result) {
option.title.text = "每日apputrack趋势图";
option.title.subtext = "apputrack";
option.legend.data[0] = "apputrack";
option.xAxis[0].data = result.day;
option.series[0].name = "apputrack";
option.series[0].data = result.cnt;
myChart.setOption(option);
}
}
4、ajax获取restful数据
//ajax获取数据
function myInterval(restPath) {
$.ajax({
type : 'get',// jquey是不支持post方式跨域的
async : false,
url : baseUrl +restPath, // 跨域请求的URL
dataType : 'jsonp',
jsonp : "callback",// 服务端用于接收callback调用的function名的參数
success : function(result) {
setResult(result, option, myChart);
},
error : function() {
alert('fail');
}
});
}
5、定时调度及參数设置
//ajax获取数据
function myInterval(restPath) {
$.ajax({
type : 'get',// jquey是不支持post方式跨域的
async : false,
url : baseUrl +restPath, // 跨域请求的URL
dataType : 'jsonp',
jsonp : "callback",// 服务端用于接收callback调用的function名的參数
success : function(result) {
setResult(result, option, myChart);
},
error : function() {
alert('fail');
}
});
}
展示效果图:
