ECharts3.0發佈了,此次冷豔的配色真好看啊 連接描述css
3.0和以前的2.2兩個版本幾乎能夠算是兩個庫了,變化很大,對移動端作了很大優化:
1.再也不按需引入js文件,和其餘普通js庫同樣用標籤引入就好,可是能夠在官網構建庫的時候按需構建.
2.除了一個默認主題,沒有其餘內置主題,使用其餘主題須要在init以前註冊主題.
3.縮放dataZoom有了很大的改進,如今有三種縮放:slider即2.2中的縮放條,inside鼠標滾輪縮放,select是toolbox裏的框選縮放。鼠標滾輪是3.0新功能,很是好用,徹底沒有卡頓。
4.數據視覺映射,以前也經過本身指定柱圖每一個柱子itemStyle的顏色透明度來實現數據越大顏色越深,數據越小顏色越淺,如今有visualMap就更加簡單了,並且效果更好。html
bug也發現了一些,有些地方特別是在異步加載時和2.2有很多區別,2.2的項目代碼拿過來可能會出現奇怪的沒做用的現象,好比legend要異步加載的話,init時就不能寫……官網給的異步的例子太少,並且是針對數據部分的,但其實好比標題、圖例、軸標籤等等都是會有異步加載需求的。
下面是對餅圖、柱圖、折線以及部分新功能的嘗試,由於業務需求,因此都是用異步加載方式來設置數據。jquery
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="pragma" content="no-cache" /> <title>ECHARTS3 TEST</title> <link href="./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="./js/jquery.min.js"></script> <script src="./bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="./echarts/3.0/echarts.min.js"></script> </head> <body> <div class="col-md-12"> <div id="main"></div> </div> <div class="col-md-6"> <button class="btn k-btn" type="button" onclick="getPie()">得到一個餅圖<em class="icon-align-left"> </em> </button> <div class="col-md-12" id="pie1" style="height:400px"> </div> </div> <div class="col-md-6"> <button class="btn k-btn" type="button" onclick="getBar()">得到一個柱圖<em class="icon-align-left"> </em> </button> <div class="col-md-12" id="bar1" style="height:400px"> </div> </div> <div class="col-md-12"> <button class="btn k-btn" type="button" onclick="getLine()">得到一個曲線<em class="icon-align-left"> </em> </button> <div class="col-md-12" id="line1" style="height:400px"> </div> </div> </body> <script> var pie; var pieopt = { title : { text: '', }, tooltip : { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, calculable : true, /* 3.0不支持? */ /* legend: { // 3.0動態加載圖例時此處不能有legend show:true, data:[] },*/ toolbox: { show:true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, visualMap: [ // 3.0新功能 數據視覺映射 跟圖裂的顏色衝突 { type: 'piecewise', min: 0, max: 30, dimension: 0, // series.data 的第一個維度(即 value[0])被映射 seriesIndex: 0, // 對第一個系列進行映射。 inRange: { // 選中範圍中的視覺配置 color: ['red', 'red'], colorLightness: [0.9, 0.3], symbolSize: [30, 100] }, } ], series: [{ name: 'pie1', type: 'pie', data: [] }] }; var bar; var bar_name = ['越限', '異常', '事故', '告知', '變位']; var baropt = { title : { text: '', x:'center', y:'top' }, backgroundColor:'#fff', tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器,座標軸觸發有效 type : 'shadow' // 默認爲直線,可選爲:'line' | 'shadow' } }, toolbox: { show:true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'category', data:[] } ], yAxis : [ { type : 'value' } ], series : [] }; var barserie= { name:'', type:'bar', stack: 'sum', // 堆積圖 itemStyle : { normal: { label : { // 柱子上的數字 show: true, position: 'inside'}} }, data:[] }; var line; var lineopt = { title: { x:'center', text: '' }, tooltip:{ show : true, trigger: 'axis', // 座標軸觸發 也能夠item數據點觸發 formatter:function (params){ // tip的樣式 var res = '時間 : ' + params[0].name +'<br/>'; for (var i = 0, l = params.length; i < l; i++) { res += '<br/>' + params[i].seriesName + ' : ' + params[i].value; } return res; } }, xAxis: [{ type: 'category', // 有今日、昨日曲線疊加的 用category即字符串 boundaryGap : false, splitLine:{ show:false }, data:[] }], yAxis: [{ name:'', nameLocation:'end', type: 'value', scale:true, axisLabel: { formatter: '{value}' } }], series:[] }; var lineserie = { name:'', type:'line', markPoint:{ // 沒法異步設置markPoint和markLine 也沒有addMarkLine函數可用 data: [{ name: '最大值', type: 'max' }] }, markLine:{ data:[ { name: 'aaa', // 支持 'average', 'min', 'max' type: 'average' } ] }, // data:[1,2,3,4,4,3,6,11,2,3,4] data:[] // 同步方式setOption時,若是設置了markPoint和markLine data不可爲空 }; // 從2.x裏主題文件裏抄來設置 此處略 var theme = { }; // 主題註冊 至關於存儲了了主題名字和對象的對應關係 echarts.registerTheme('infograph', theme); $(document).ready(function(){ pie = echarts.init(document.getElementById('pie1'), 'infograph'); // 帶主題的初始化 pie.setOption(pieopt); function eConsolePieClick(e) { console.log(e); // 3.0 e有嵌套結構,不能夠JSON.stringify } pie.on('click', eConsolePieClick); // 點擊事件綁定 與2.0不一樣 bar = echarts.init(document.getElementById('bar1')); bar.setOption(baropt); line = echarts.init(document.getElementById('line1')); line.setOption(lineopt); // 多圖聯動 3.0.1fix pie.group = 'group1'; bar.group = 'group1'; line.group = 'group1'; echarts.connect('group1'); // echarts.connect([pie, bar, line]); // 聯動的兩種寫法 }); </script> <script> function getPie(){ var resp = "{\"objName\":\"告警\", \"dispName\":[\"越限\",\"異常\",\"事故\",\"告知\",\"變位\"], \"value\":[10.0, 20.0, 15.0, 12.0, 29.0], \"id\":[\"111\", \"112\", \"113\",\"114\",\"115\"]}"; var respobj = JSON.parse(resp); // 數據 // 餅圖的名字從控件選擇中拼出來 var piedata = []; // 餅的數字 var pieLegend = []; // 餅的圖例 $(respobj.value).each(function(i){ piedata.push({name:respobj.dispName[i], value:respobj.value[i]}); // 餅的數據是對象 {name:"str", value:number} pieLegend.push(respobj.dispName[i]); // 圖例和每塊餅的name要一致 }); var opt = { title:{ text: respobj.objName }, legend:{ orient : 'vertical', x : 'right', y:"bottom", data:pieLegend }, series:[ { name:"pie1", type: 'pie', data:piedata } ] }; pie.setOption(opt); } function getBar(){ var resp = "{\"objName\":\"TITLE here\", \"dispName\":[\"a1\",\"a2\",\"a3\",\"a4\",\"a5\"], \"value\":[[4,3,3,6,1],[2,2,3,3,1],[7,3,5,6,1],[4,2,3,6,3]], \"id\":[\"001\",\"002\",\"003\",\"004\",\"005\"]}"; var respobj = JSON.parse(resp); // 數據 var xAxis = []; var series = []; $(respobj.dispName).each(function(i){ xAxis.push(respobj.dispName[i]); }); $(respobj.value).each(function(i){ var new_serie = JSON.parse(JSON.stringify(barserie)); new_serie.name = bar_name[i]; new_serie.data = respobj.value[i]; series.push(new_serie); }); var opt = { title:{ text:respobj.objName }, xAxis:{ data:xAxis }, legend:{ show:true, x:'right', y:'top', data: bar_name }, series:series } bar.setOption(opt); } function getLine(){ var resp = "{\"dataArray\":[[120.33, 132.12, 101.09, 134.22, 90.17, 230.50, 210.79, 120.79], [220, 182, 191, 234, 290, 330, 310, 350]], \"curveName\":[\"越限\", \"異常\"], \"objName\":\"測試曲線\"}"; console.log(resp); var respobj = JSON.parse(resp); // 數據 for (var i=0; i<280; i++) { respobj.dataArray[0].push(Math.round(Math.random() * 120-38)); respobj.dataArray[1].push(Math.round(Math.random() * 200-51)); } var xAxis = []; var series = []; var legend = [] for (var i=0; i<respobj.dataArray.length; i++) { var new_series = JSON.parse(JSON.stringify(lineserie)); // 能夠用預設的不一樣風格的曲線 new_series.name = respobj.curveName[i]; new_series.data = respobj.dataArray[i]; legend.push(respobj.curveName[i]); // 必須和曲線的name一致 每條曲線的名字必須不同,不然圖例會出錯 series.push(new_series); } xAxis = getDayXAsis(respobj.dataArray[0].length); var opt = { title:{ text: respobj.objName }, legend:{ show:true, x: 'right', // 'center' | 'left' | {number}, y: 'top', // 'center' | 'bottom' | {number} data:legend }, dataZoom : [{ type:'slider', // 3.0中縮放的默認type是inside,須要2.x中的縮放條須要寫type:'slider' show : true, start : 40, end : 60 }, { type: 'inside', // 支持鼠標縮放 realtime: true, start: 30, end: 70 }], xAxis:[{ data:xAxis }], series:series }; console.log(JSON.stringify(opt, null, 4)); line.setOption(opt); } // 根據數據點數建立日曲線的x軸標籤 function getDayXAsis(split_num) { var xasis = []; // 若是是288點就5分鐘一個標籤 96點就15分鐘一個標籤 var offset = 86400/split_num; var d = new Date(1986, 4, 25); for (var i=0; i<split_num; i++) { var nd = new Date(); nd.setTime(d.getTime() +offset*1000*i); var str = (nd.getHours())+":"+(nd.getMinutes()); xasis.push(str); } return xasis; } </script> </html>