快速基於echarts的大資料視覺效果

標籤：echarts   可視化   大資料   

[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,  // 跨域請求的URLdataType : '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,  // 跨域請求的URLdataType : 'jsonp',jsonp : "callback",// 服務端用於接收callback調用的function名的參數success : function(result) {setResult(result, option, myChart);},error : function() {alert('fail');}});}

展示:

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

快速基於echarts的大資料視覺效果