現在分別對摺線圖、柱狀圖、餅圖、中國地圖四類圖表的數據綁定進行詳細的介紹。echarts中其它的圖表方法都差不多，只要瞭解官方的demo，按照指定的數據結構進行解析都能很方便的得到想要的結果；
echarts中提供了setOption、setSeries兩個方法可以對圖表的相關數據和屬性進行動態設置，setOption一定要在setSeries之前設置；
var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var option = { title: { text: '標題', x:"center" }, tooltip: { trigger: 'axis' }, legend: { data:[], y:"bottom" }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [{ type: 'category', data:[] }], yAxis: [{ type: 'value' }], series: [] };
option中的屬性可以通過對象屬性的方式獲取設置；例如以上代碼中，
option.legend.data=["xx","xx"] 可以通過這種方法設置對應屬性的值
option.title.text="改變標題";//改變標題屬性
option.xAxis[0]["data"]=[];//改變座標值
myChart.setOption(option);//設置圖表對象的所有參數屬性
myChart.setSeries(seriesData);//設置圖表對象的數據集合
通過後臺交互數據肯定會有一定的延遲，這時最好能有一個友好載入提示，echarts提供showLoading方法
// 載入動畫提示 myChart.showLoading({ text: '正在努力的讀取數據中...' }); //取消載入提示 myChart.hideLoading();
來幾個具體的實例吧。
以下實例的ajax用jquery的$.ajax。所以如果你要在本地測試，需要引用jquery.js。
這裏所有demo雖然也請求了後臺。但都是通過前後模擬了一個返回的json數據。不管各位是搞jsp、asp、php的都沒關係，只要按指定的格式生成對的格式的json數據就行了。
至於後臺如何生成json數據，各自就baidu下吧。這裏就不提了。
通過官方的demo我可以看到哪些屬性是需要動態傳入數據，然後我們按照格式傳入對應的值或數組；
通過demo的代碼。我們可以看出折線標紅的地方需要動態設置分別是
option.title.text="標題";
option.legend.data=["圖例1","圖例2","……"];
option.xAxis[0]["data"]=["一","二","三","……"];//x軸數據
var seriesData=[
{
name:"圖例1",
type:"line",
data:[1,2,3]
}
]
myChart.setOption(option); //設置全部參數屬性
myChart.setSeries(seriesData);//設置圖例數據
通過以上方法就可以實現動態的echarts數據改變了。
1、折線圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>數據綁定 柱狀圖</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script> </head> <body> <div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div> <script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用資源文件夾路徑，注意路徑 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var option = { title: { text: '', x:"center" }, tooltip: { trigger: 'axis' }, legend: { data:[], y:"bottom" }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [{ type: 'category', data:[] }], yAxis: [{ type: 'value' }], series: [] }; // 載入動畫--------------------- myChart.showLoading({ text: '正在努力的讀取數據中...', //loading話術 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //數據接口成功返回 //後臺需要返回以下結構的json數據 data={ "legen":["訪問量","訂單數"], "axis":['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], "series":[ [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], [4.0, 2.9, 6.0, 21.2, 50.6, 56.7, 115.6, 102.2, 62.6, 20.0, 9.4, 3.3] ] }; var legendData=[]; var xAxisData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; xAxisData=data["axis"]; for(var i=0,len=data["series"].length;i<len;i++){ seriesData.push({ "name":legendData[i], "type":"line", "data":data["series"][i] }); } } option.title.text="折線圖標題"; option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ //數據接口異常處理 var legendData=['']; var xAxisData=['']; var seriesData = [ { name:'', type: 'line', data: [0] } ]; option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, complete:function(){ //不管數據接口成功或異常，都終於載入提示 //停止動畫載入提示 myChart.hideLoading(); } }); } ); </script> </body> </html>
2、柱狀圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>數據綁定 柱狀圖</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script> </head> <body> <div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div> <script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用資源文件夾路徑，注意路徑 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var option = { title: { text: '標題', x:"center" }, tooltip: { trigger: 'axis' }, legend: { data:[], y:"bottom" }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, xAxis: [{ type: 'category', data:[] //['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }], yAxis: [{ type: 'value' }], series: [] }; // 載入動畫--------------------- myChart.showLoading({ text: '正在努力的讀取數據中...', //loading話術 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //後臺需要返回以下結構的json數據 data={ "legen":["訪問量","訂單數"], "axis":['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], "series":[ [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], [4.0, 2.9, 6.0, 21.2, 50.6, 56.7, 115.6, 102.2, 62.6, 20.0, 9.4, 3.3] ] } var legendData=[]; var xAxisData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; xAxisData=data["axis"]; for(var i=0,len=data["series"].length;i<len;i++){ seriesData.push({ "name":legendData[i], "type":"bar", //柱狀圖和拆線圖類似只要將bar 改成line "data":data["series"][i] }); } } option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ var legendData=['']; var xAxisData=['']; var seriesData = [ { name:'訂單數', type: 'bar', //柱狀圖和拆線圖類似只要將bar 改成line data: [0] } ]; option.legend.data=legendData; option.xAxis[0]["data"]=xAxisData; myChart.setOption(option); myChart.setSeries(seriesData); }, complete:function(){ //停止動畫載入提示 myChart.hideLoading(); } }); } ); </script> </body> </html>
3、餅圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>數據綁定 餅圖</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script> </head> <body> <div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div> <script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用資源文件夾路徑，注意路徑 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie' ], function (ec) { var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var option = { title: { text: '標題', x:"center" }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { data:[], y:"bottom" }, calculable : true, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, series: [] }; // 載入動畫--------------------- myChart.showLoading({ text: '正在努力的讀取數據中...', //loading話術 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //後臺需要返回以下結構的json數據 data={ "legen":["訪問量","訂單數","購買數"], "series":[4440,3220,1110] } var legendData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; seriesData.push({ "name":"餅圖標例1", "type":"pie", "radius" : '55%', //餅圖半徑大小 "center": ['50%', '60%'],//餅圖圓心位置x,y "data":function(){ var t_data=[]; for(var i=0,len=data["series"].length;i<len;i++){ t_data.push({ "name":legendData[i], "value":data["series"][i] }); } return t_data; }() }); } option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ var legendData=['']; var seriesData = [ { "name":"餅圖標例1", "type":"pie", "radius" : '55%', //餅圖半徑大小 "center": ['50%', '60%'],//餅圖圓心位置x,y data: [0] } ]; option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }, complete:function(){ //停止動畫載入提示 myChart.hideLoading(); } }); } ); </script> </body> </html>
4、中國地圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>數據綁定 中國地圖</title> <script src="../js/jquery-1.7.min.js" type="text/javascript"></script> <script src="../build/source/echarts.js" type="text/javascript"></script> </head> <body> <div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div> <script type="text/javascript"> require.config({ paths: { echarts: '../build/dist' //引用資源文件夾路徑，注意路徑 } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/map' ], function (ec) { var myChart = ec.init(document.getElementById('div1')); var ecConfig = require('echarts/config'); var mapType = [ 'china', '廣東', '青海', '四川', '海南', '陝西', '甘肅', '雲南', '湖南', '湖北', '黑龍江', '貴州', '山東', '江西', '河南', '河北', '山西', '安徽', '福建', '浙江', '江蘇', '吉林', '遼寧', '臺灣', '新疆', '廣西', '寧夏', '內蒙古', '西藏', '北京', '天津', '上海', '重慶', '香港', '澳門' ]; var option = { title: { text: '標題', x:"center" }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { data:[], y:"bottom" }, dataRange: { min: 0, max:50000, //最好通過對數據計算得出，不要寫死 x: 'left', y: 'bottom', text:['高','低'], // 文本，默認爲數值文本 calculable : true }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, series: [] }; // 載入動畫--------------------- myChart.showLoading({ text: '正在努力的讀取數據中...', //loading話術 }); $.ajax({ url:"Default.aspx", data:{}, success:function(data){ //後臺需要返回以下結構的json數據 data={ "legen":["訪問量","訂單數"], "series":[ [{"name":"上海","value":31417.76},{"name":"雲南","value":5828.25},{"name":"其他","value":0.00},{"name":"內蒙古","value":297.00},{"name":"北京","value":25683.00},{"name":"吉林","value":3044.38},{"name":"四川","value":26890.66},{"name":"天津","value":11341.98},{"name":"寧夏","value":297.00},{"name":"安徽","value":1553.00},{"name":"山東","value":17969.81},{"name":"山西","value":2675.20},{"name":"廣東","value":51438.63},{"name":"廣西","value":4806.00},{"name":"新疆","value":5788.21},{"name":"江蘇","value":76003.09},{"name":"江西","value":12879.03},{"name":"河北","value":7811.25},{"name":"河南","value":3772.00},{"name":"浙江","value":13383.12},{"name":"海南","value":0.00},{"name":"湖北","value":22250.17},{"name":"湖南","value":12925.44},{"name":"甘肅","value":7561.56},{"name":"福建","value":22143.76},{"name":"西藏","value":1802.40},{"name":"貴州","value":6961.41},{"name":"遼寧","value":8506.00},{"name":"重慶","value":14562.92},{"name":"陝西","value":3939.03},{"name":"青海","value":0.00},{"name":"黑龍江","value":2010.28}], [{"name":"上海","value":31417.76},{"name":"雲南","value":5828.25},{"name":"其他","value":0.00},{"name":"內蒙古","value":297.00},{"name":"北京","value":25683.00},{"name":"吉林","value":3044.38},{"name":"四川","value":26890.66},{"name":"天津","value":11341.98},{"name":"寧夏","value":297.00},{"name":"安徽","value":1553.00},{"name":"山東","value":17969.81},{"name":"山西","value":2675.20},{"name":"廣東","value":51438.63},{"name":"廣西","value":4806.00},{"name":"新疆","value":5788.21},{"name":"江蘇","value":76003.09},{"name":"江西","value":12879.03},{"name":"河北","value":7811.25},{"name":"河南","value":3772.00},{"name":"浙江","value":13383.12},{"name":"海南","value":0.00},{"name":"湖北","value":22250.17},{"name":"湖南","value":12925.44},{"name":"甘肅","value":7561.56},{"name":"福建","value":22143.76},{"name":"西藏","value":1802.40},{"name":"貴州","value":6961.41},{"name":"遼寧","value":8506.00},{"name":"重慶","value":14562.92},{"name":"陝西","value":3939.03},{"name":"青海","value":0.00},{"name":"黑龍江","value":2010.28}] ] } var legendData=[]; var seriesData=[]; if(data!=null && data["series"].length>0){ legendData=data["legen"]; for(var i=0,len=data["series"].length;i<len;i++){ seriesData.push({ "name":legendData[i], "type":"map", "mapType":"china", "roam":false, "itemStyle":{ "normal":{"label":{show:true}}, "emphasis":{"label":{show:true}} }, "data": data["series"][i] }); } } option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }, error:function(){ // var legendData=['']; // var seriesData = [ // { // "name":"餅圖標例1", // "type":"pie", // "radius" : '55%', //餅圖半徑大小 // "center": ['50%', '60%'],//餅圖圓心位置x,y // data: [0] // } // ]; // option.legend.data=legendData; // myChart.setOption(option); // myChart.setSeries(seriesData); }, complete:function(){ //停止動畫載入提示 myChart.hideLoading(); } }); } ); </script> </body> </html>
注意dataRange的max和min會影響到顏色深度的。因爲當前值會和最大值求比，然後計算顏色深度。
可以通過dataRange的color:['#dddddd','#777777'] 設置max,min的顏色值
