【echarts】echarts开发详解
生活随笔
收集整理的這篇文章主要介紹了
【echarts】echarts开发详解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
echarts官方文檔：
http://echarts.baidu.com/doc/doc.html#簡介
ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。
支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯(lián)動和混搭展現(xiàn)。
第一種：數(shù)據(jù)寫死在前臺
先貼一張效果圖：（HTML靜態(tài)頁面，主要考慮圖標(biāo)展現(xiàn)效果）
實例頁面的下載地址：
http://download.csdn.net/detail/lmb55/9241793
echarts頁面的開發(fā)主要有兩部步：
1、設(shè)定一個存放圖標(biāo)的div；
2、調(diào)用畫圖方法進(jìn)行畫圖；
2.1 初始化將要存放echarts圖表的DOM對象（div）；
myChart = echarts.init(document.getElementById('main'));2.2 編寫echarts圖表需要的屬性（option）；
var options = { …… }；2.3 將屬性注入圖表
myChart.setOption(options);Demo.jsp
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" /><link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" /><script src="bootstrap/js/jquery-1.11.3.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script> </head> <body><!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom --><div id="main" style="height:500px;width:750px;float:left"></div><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路徑配置（echarts正常顯示需要加載的文件所在路徑）require.config({paths: {echarts: 'echarts-2.2.7/build/dist'}});// 使用require(['echarts','echarts/chart/bar','echarts/chart/line' // 使用柱狀圖就加載bar模塊，按需加載],//功能：繪制需要顯示的圖形function drewEcharts(ec) {//通過id屬性，在相應(yīng)的div中初始化echarts圖表myChart = ec.init(document.getElementById('main')); var option = {timeline: {//時間軸data: ['10-9','10-8','10-7','10-6','10-5','10-4','10-3','10-2','10-1'],height: 80,x: 50,padding: [30,10,10,10],autoPlay: false,//設(shè)置是否自動輪轉(zhuǎn)playInterval: 2000//設(shè)置自動輪轉(zhuǎn)時間},options:[//接口訪問總量橫縱坐標(biāo)軸設(shè)置{//圖標(biāo)屬性calculable:true,title : { // text: '接口訪問總量', // subtext: '當(dāng)前為周統(tǒng)計視圖' ,x:'left'}, dataZoom : {//數(shù)據(jù)區(qū)域縮放（滾動條）show : true,realtime : true,start : 30,//從30%開始展現(xiàn)// y:20,// dataBackgroundColor:"green",end : 60,//在60%的數(shù)據(jù)處截止//witdh:5,height:15},tooltip : {//提示trigger: 'axis',formatter: ""},legend: {//圖例（根據(jù)實際需要可設(shè)置多個，多個圖例之間用英文逗號隔開）data:['接口實時并發(fā)量']},toolbox: {//輔助工具箱，輔助功能，如添加標(biāo)線，框選縮放等x: 'right', y: 'center',orient : 'vertical',show : true,feature : {//定義一些特色小功能，mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},//對X坐標(biāo)軸進(jìn)行設(shè)置xAxis : [{type : 'category',position: 'bottom',boundaryGap: true,axisLine : { // x軸線的設(shè)置show: false,//設(shè)置X坐標(biāo)軸線的顯示風(fēng)格lineStyle: {color: 'green',type: 'solid',width: 2}},axisTick : { // X軸坐標(biāo)點標(biāo)記show:true,length: 5,//設(shè)置X坐標(biāo)軸坐標(biāo)點的顯示風(fēng)格lineStyle: {color: 'red',type: 'solid',width: 1}},axisLabel : {//X軸數(shù)據(jù)風(fēng)格show:true,interval: 'auto', // {number}刻度的長短，可設(shè)為數(shù)字rotate: 0,margin:-20,splitNumber: 18,formatter: '',//Template formatter!'{value}單位'/* textStyle: {color: 'blue',fontFamily: 'sans-serif',fontSize: 15,fontStyle: 'italic',fontWeight: 'bold'}*/},splitLine : {show:false,lineStyle: {color: '#483d8b',type: 'dashed',width: 1}},/* splitArea : {show: true,areaStyle:{color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']}},*/data : [//X軸刻度'0:00','0:10','0:20','0:30','0:40','0:50','1:00','1:10','1:20','1:30','1:40','1:50','2:00','2:10','2:20','2:30','2:40','2:50','3:00']}],//對Y坐標(biāo)軸進(jìn)行設(shè)置yAxis : [{type : 'value','name':'接口訪問總量',position: 'left',splitNumber: 10,boundaryGap: [0,0.1],axisLine : { // 左邊y軸線show: true,/*lineStyle: {color: 'red',type: 'dashed',width: 2}*/},axisTick : { //左邊y軸坐標(biāo)標(biāo)記點show:true,length: 10,lineStyle: {color: 'green',type: 'solid',width: 2}},axisLabel : {//Y軸數(shù)據(jù)風(fēng)格show:true,interval: 10,//'auto', // {number}rotate: 0,//左邊Y軸左邊數(shù)據(jù)的選擇角度margin: 18,formatter: '{value}', // Template formatter!'{value}單位'},},],series : [//數(shù)據(jù)系列，一個圖表可能包含多個系列，每一個系列可能包含多個數(shù)據(jù) {name: '接口訪問總量',type: 'line',//Y軸需要顯示的數(shù)據(jù)data:[2325, 2565, 5676,1356, 1622, 3266, 2007,2325, 2565, 5676,1356, 1622, 3266, 2007,2325, 2565, 5676,1356, 1622, 3266, 2007,2325, 2565, 5676,1356, 1622],markPoint : {//設(shè)置特殊顯示點data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},}]},//接口成功率橫縱坐標(biāo)軸設(shè)置{calculable:true,title : { // text: '接口成功率', // subtext: '當(dāng)前為周統(tǒng)計視圖' ,x:'left'}, dataZoom : {//數(shù)據(jù)區(qū)域縮放，常用于展現(xiàn)大量數(shù)據(jù)時選擇可視范圍 show : true,realtime : true,start : 30,// y:20,// dataBackgroundColor:"green",end : 60,witdh:5,height:15},tooltip : {//氣泡提示框，常用于展現(xiàn)更詳細(xì)的數(shù)據(jù) trigger: 'axis',formatter: ""},legend: {data:['接口成功率']toolbox: {//輔助工具箱，輔助功能，如添加標(biāo)線，框選縮放等x: 'right', y: 'center',orient : 'vertical',show : true,feature : {mark : {show: true},dataView : {show: true},magicType : {show: true, type: ['line','bar', 'stack']},//進(jìn)行不同圖形的轉(zhuǎn)化restore : {show: true},saveAsImage : {show: true}}},xAxis : [{type : 'category',position: 'bottom',boundaryGap: true,axisLine : { // x軸線軸線的設(shè)置show: false,lineStyle: {color: 'green',type: 'solid',width: 2}},axisTick : { // X軸坐標(biāo)點標(biāo)記show:true,length: 5,lineStyle: {color: 'red',type: 'solid',width: 2}},axisLabel : {//X軸數(shù)據(jù)風(fēng)格show:true,interval: 'auto', // {number}rotate: 0,margin:-20,splitNumber: 23,formatter: '{value}點',//Template formatter!'{value}單位'/* textStyle: {color: 'blue',fontFamily: 'sans-serif',fontSize: 15,fontStyle: 'italic',fontWeight: 'bold'}*/},splitLine : {show:false,lineStyle: {color: '#483d8b',type: 'dashed',width: 1}},/* splitArea : {show: true,areaStyle:{color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']}},*/data : ['0:00','0:10','0:20','0:30','0:40','0:50','1:00','1:10','1:20','1:30','1:40','1:50','2:00','2:10','2:20','2:30','2:40','2:50','3:00']}],yAxis : [{type : 'value','name':'接口成功率',position: 'left',splitNumber: 10,boundaryGap: [0,0.1],axisLine : { // 左邊y軸線show: true,/*lineStyle: {color: 'red',type: 'dashed',width: 2}*/},axisTick : { //左邊y軸坐標(biāo)標(biāo)記show:true,length: 10,lineStyle: {color: 'green',type: 'solid',width: 2}},axisLabel : {show:true,interval: 10,//'auto', // {number}定義橫坐標(biāo)刻度長短rotate: 0,//左邊Y軸左邊數(shù)據(jù)的選擇角度margin: 18,formatter: '{value}', // Template formatter!'{value}單位'},}],//可用grid屬性控制圖表大小grid : { width : '90%' },series : [{name: '接口成功率',type: 'line',data:[2325, 2565, 7676,1356, 1622, 3266, 2007],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},}]}]};// 為echarts對象加載數(shù)據(jù) myChart.setOption(option); });</script></body> </html>第二種：前后臺數(shù)據(jù)交互實現(xiàn)echarts圖表
實現(xiàn)原理：基于springmvc的controller注解。前臺頁面通過請求controller方法進(jìn)行數(shù)據(jù)的獲取，獲取成功將數(shù)據(jù)設(shè)置到相應(yīng)的位置上；controller中可以從數(shù)據(jù)庫或者其他的第三方系統(tǒng)取數(shù)據(jù)，本例采用簡單實現(xiàn)，直接將數(shù)據(jù)在controller中給出；
實例解析：
DynamicInteractionDemo.jsp
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="ECharts"><meta name="author" content="kener.linfeng@gmail.com"><title>ECharts · 前后臺交互Demo</title><% request.setAttribute("ctx", request.getContextPath() ) ; %><link rel="shortcut icon" href="${ctx}/config/echarts/echarts/doc/asset/ico/favicon.png"><link href="${ctx}/config/echarts/echarts/doc/asset/css/font-awesome.min.css" rel="stylesheet"><link href="${ctx}/config/echarts/echarts/doc/asset/css/bootstrap.css" rel="stylesheet"><link href="${ctx}/config/echarts/echarts/doc/asset/css/carousel.css" rel="stylesheet"><link href="${ctx}/config/echarts/echarts/doc/asset/css/echartsHome.css" rel="stylesheet"><!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- --><script src="${ctx}/config/echarts/echarts/src/echarts.js"></script><script src="${ctx}/config/echarts/echarts/doc/asset/js/codemirror.js"></script><script src="${ctx}/config/echarts/echarts/doc/asset/js/javascript.js"></script><link href="${ctx}/config/echarts/echarts/doc/asset/css/codemirror.css" rel="stylesheet"><link href="${ctx}/config/echarts/echarts/doc/asset/css/monokai.css" rel="stylesheet"> </head><body><div id="main" class="main"></div>//存放圖表的div<!-- ECharts單文件引入 --><script src="${ctx}/config/echarts/echarts/build/dist/echarts-all.js"></script><script type="text/javascript" language="javascript"> //調(diào)用畫圖方法進(jìn)行畫圖 DrawEChart(echarts);//創(chuàng)建繪制ECharts圖表的方法 function DrawEChart(echarts) { var myChart; alert('DrawEChart()'); myChart = echarts.init(document.getElementById('main')); myChart.showLoading({ text : "圖表數(shù)據(jù)正在努力加載..." }); //定義圖表屬性options var options = { title : { text : "未來一周氣溫變化", subtext : "純屬虛構(gòu)", sublink : "http://www.baidu.com" }, 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', boundaryGap : false, data : [ '1', '2', '3', '4', '5', '6', '7' ] } ], yAxis : [ { type : 'value', axisLabel : { formatter : '{value} °C' }, splitArea : { show : true } } ], grid : { width : '90%' }, series : [ { name : '最高氣溫', type : 'line', data : [ 11, 22, 33, 44, 55, 33, 44 ],//必須是Integer類型的,String計算平均值會出錯 markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, markLine : { data : [ { type : 'average', name : '平均值' } ] } } ] }; myChart.setOption(options); //先把可選項注入myChart中 myChart.hideLoading(); alert('ending');//設(shè)置延遲setTimeout( function getChartData() { alert('getChartData()' + options);//獲得圖表的options對象 //var options = myChart.getOption(); //alert(options),//通過Ajax獲取數(shù)據(jù) $.ajax({ url : "${ctx}/restservice/echarts",//springmvc的controller的請求路徑type : "post", //async : true, //同步執(zhí)行 data : {}, dataType : "json", //返回數(shù)據(jù)形式為json success : function(result) { if (result) { alert('requestSuccess');//請求成功將數(shù)據(jù)設(shè)置到相應(yīng)的位置上options.legend.data = result.legend; options.xAxis[0].data = result.category; options.series[0].data = result.series[0].data; myChart.hideLoading(); myChart.setOption(options); } }, error : function(xmlHttpRequest,errorMsg,exceptionObject) { alert("requestError"); alert('xmlHttpRequest>>>>>' + xmlHttpRequest + ' errorMsg>>>>>' + errorMsg + ' exceptionObject>>>>>' + exceptionObject);myChart.hideLoading(); } }); } ,100);//getChartData(myChart);//aja后臺交互 };</script> <!-- Le javascript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="${ctx}/config/echarts/echarts/doc/asset/js/jquery.min.js"></script><script type="text/javascript" src="${ctx}/config/echarts/echarts/doc/asset/js/echartsHome.js"></script><script src="${ctx}/config/echarts/echarts/doc/asset/js/bootstrap.min.js"></script><script src="${ctx}/config/echarts/echarts/doc/asset/js/echartsExample.js"></script> </body> </html>獲取 && 封裝表單數(shù)據(jù)的controller：
DynamicInteractionController.java
用于封裝表單數(shù)據(jù)的javabean：
EchartData：
封裝縱坐標(biāo)的javabean：
Series.java：
我以上例子只給出了一種圖形示例，需要使用別的圖形時之需更改個別屬性即可。最后感謝提供如此強(qiáng)大的數(shù)據(jù)圖表庫的echarts團(tuán)隊。
ps：控制圖表大小有兩種方式：
1、限定存放圖表的div的大小；
2、使用grid屬性設(shè)定圖表大小；
echarts官方給出的文檔中可以查看每個屬性的具體含義和設(shè)置：
總結(jié)
以上是生活随笔為你收集整理的【echarts】echarts开发详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Spring学习】spring动态配置
- 下一篇： 【easyui】easyui datag