百度開源外掛echarts介紹及如何使用
阿新 • • 發佈：2020-11-13
前言
如果你想要用較少的程式碼實現比較酷炫的資料統計表，echarts是值得你考慮的一種實現方式。官網提供了很多例項供參考：http://echarts.baidu.com/examples.html。感興趣可以先一睹為快！！！
圖1
圖2
圖1,2是我們常見到非常高大上的大資料展示屏的效果，非常的高大上，這實現效果全部是是用外掛echarts來實現的。下面給大家介紹怎麼去使用開源外掛。
環境搭建
這個環境搭建so easy! 其實只有一個echarts.min.js而已。可以從官網下載http://echarts.baidu.com/download.html。根據自己的需要可以常用、精簡、安裝或者原始碼包，甚至可以自定義下載。
在你的網頁里加入這個js檔案就有了echarts的開發環境，是不是so easy！
建立演示例項
雖說官方給出了很多演示例項，同時也給出了一些幫助文件。但是個人認為還是有必要弄清楚如何利用官方所提供的js建立實現一些圖表，具體每個圖表的引數有哪些，怎麼設定，這就需要檢視相關的幫助文件。而我這裡所說的就是指明怎麼建立及一些值得注意的地方。
1）引入echarts.js。
<script type="text/javascript" src="./js/echarts.js"></script>
2）建立一個DOM容器。熟悉html的朋友應該很清楚，一個html就是一個DOM樹，各個標籤節點都是dom節點。DOM容器就是裡面可以存放其他節點標籤，比如div。
<div id="main" style="width: 500px;height: 400px;"></div>
3）echarts.init(dom容器)。dom容器必須是html的節點，如果是使用jQuery獲取的則必須指定集合中的一個元素節點，比如(“#main”)則表示jQuery物件。$(“#main”)[0]則表示一個id為main的節點。
var myChart = echarts.init(document.getElementById("main"));
4）設定引數。
方法一：
var option = { title:{ text:"第一個圖示演示示例" }, tooltip:{ text:"this is tool tip" }, legend:{ data:['銷量'] }, xAxis:{ data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"] }, yAxis:{}, series:[{ name:["銷量"], type:"bar", data:[5,20,36,6,43,67] }] }; myChart.setOption(option);
方法二：
myChart.setOption({ title:{ text:"第一個圖示演示示例" }, tooltip:{ text:"this is tool tip" }, legend:{ data:['銷量'] }, xAxis:{ data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"] }, yAxis:{}, series:[{ name:["銷量"], type:"bar", data:[5,20,36,6,43,67] }] });
完成以上就已經實現了一個條形圖。對就是這麼簡簡單單的就實現了圖表，正如官網說的五分鐘學會echarts。
具體每一個圖表的相關設定屬性需要檢視相對額幫助文件！！！http://echarts.baidu.com/api.html。
演示例項
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> <script type="text/javascript" src="./js/echarts.js"></script> </head> <body> <div class="col-xs-4"> <h3>條形圖</h3> <div id="main" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); var option = { title:{ text:"第一個圖示演示示例" }, tooltip:{ text:"this is tool tip" }, legend:{ data:['銷量'] }, xAxis:{ data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"] }, yAxis:{}, series:[{ name:["銷量"], type:"bar", data:[5,20,36,6,43,67] }] }; // myChart.setOption(option); myChart.setOption({ title:{ text:"第一個圖示演示示例" }, tooltip:{ text:"this is tool tip" }, legend:{ data:['銷量'] }, xAxis:{ data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"] }, yAxis:{}, series:[{ name:["銷量"], type:"bar", data:[5,20,36,6,43,67] }] }); </script> </div> <div class="col-xs-4"> <h3>餅狀圖</h3> <div id="tbSecond" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var tbSecond = echarts.init(document.getElementById("tbSecond")); // alert(tbSecond); var pieOption = { title:{ text:"餅狀圖" }, series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視訊廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜尋引擎'} ] } ] }; // alert(pieOption); tbSecond.setOption(pieOption); </script> </div> <div class="col-xs-4"> <h3>餅狀圖加陰影</h3> <div id="bzt2" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var bzt2 = echarts.init(document.getElementById("bzt2")); bzt2.setOption({ title:{ text:"餅狀圖" }, itemStyle:{ emphasis:{ shadowBlur:200, shadowColor:"rgba(0,0,0,0.8)" } }, series:[ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視訊廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜尋引擎'} ] } ] }); </script> </div> <div class="col-xs-4"> <h3>餅狀圖加背景</h3> <div id="bzt3" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var bzt3 = echarts.init(document.getElementById("bzt3")); bzt3.setOption({ title:{ text:"餅狀圖" }, backgroundColor:"#EEEFF4", itemStyle:{ emphasis:{ shadowBlur:200, shadowColor:"rgba(0,0,0,0.8)" } }, series:[ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視訊廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:400, name:'搜尋引擎'} ] } ] }); </script> </div> <div class="col-xs-4"> <h3>放大縮小</h3> <div id="dataZoom" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var dataZoom = echarts.init($("#dataZoom")[0]); dataZoom.setOption( { xAxis:{ type:"value" }, yAxis:{ type:"value" }, dataZoom:[ { type:"slider", start:10, end:60 } ], series:[ { type:"scatter", itemStyle:{ normal:{ opacity:0.8 } }, symbolSize:function(val) { return val[2] * 40; }, data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]] } ]}); </script> </div> <div class="col-xs-4"> <h3>Scatter-large</h3> <div id="sl" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var sl = echarts.init($("#sl")[0]); var sloption = { tooltip : { trigger: 'axis', showDelay : 0, axisPointer:{ show: true, type : 'cross', lineStyle: { type : 'dashed', width : 1 } }, zlevel: 1 }, legend: { data:['sin','cos'] }, toolbox: { show : true, feature : { mark : {show: true}, dataZoom : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'value', scale:true } ], yAxis : [ { type : 'value', scale:true } ], series : [ { name:'sin', type:'scatter', large: true, symbolSize: 3, data: (function () { var d = []; var len = 10000; var x = 0; while (len--) { x = (Math.random() * 10).toFixed(3) - 0; d.push([ x, //Math.random() * 10 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0 ]); } //console.log(d) return d; })() }, { name:'cos', type:'scatter', large: true, symbolSize: 2, data: (function () { var d = []; var len = 20000; var x = 0; while (len--) { x = (Math.random() * 10).toFixed(3) - 0; d.push([ x, //Math.random() * 10 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0 ]); } //console.log(d) return d; })() } ] }; sl.setOption(sloption); </script> </div> <div class="col-xs-4"> <h3>微博簽到</h3> <div id="qd" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var qd = echarts.init($("#qd")[0]); qd.showLoading(); $.get('http://echarts.baidu.com/gallery/data/asset/data/weibo.json', function (weiboData) { qd.hideLoading(); weiboData = weiboData.map(function (serieData, idx) { var px = serieData[0] / 1000; var py = serieData[1] / 1000; var res = [[px, py]]; for (var i = 2; i < serieData.length; i += 2) { var dx = serieData[i] / 1000; var dy = serieData[i + 1] / 1000; var x = px + dx; var y = py + dy; res.push([x, y, 1]); px = x; py = y; } return res; }); qd.setOption(option = { backgroundColor: '#404a59', title : { text: '微博簽到資料點亮中國', subtext: 'From ThinkGIS', sublink: 'http://www.thinkgis.cn/public/sina', left: 'center', top: 'top', textStyle: { color: '#fff' } }, legend: { left: 'left', data: ['強', '中', '弱'], textStyle: { color: '#ccc' } }, geo: { name: '強', type: 'scatter', map: 'china', label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series: [{ name: '弱', type: 'scatter', coordinateSystem: 'geo', symbolSize: 1, large: true, itemStyle: { normal: { shadowBlur: 2, shadowColor: 'rgba(37, 140, 249, 0.8)', color: 'rgba(37, 140, 249, 0.8)' } }, data: weiboData[0] }, { name: '中', type: 'scatter', coordinateSystem: 'geo', symbolSize: 1, large: true, itemStyle: { normal: { shadowBlur: 2, shadowColor: 'rgba(14, 241, 242, 0.8)', color: 'rgba(14, 241, 242, 0.8)' } }, data: weiboData[1] }, { name: '強', type: 'scatter', coordinateSystem: 'geo', symbolSize: 1, large: true, itemStyle: { normal: { shadowBlur: 2, shadowColor: 'rgba(255, 255, 255, 0.8)', color: 'rgba(255, 255, 255, 0.8)' } }, data: weiboData[2] }] }); }); </script> </div> <div class="col-xs-4"> <h3>極座標雙軸線</h3> <div id="jzb" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var jzb = echarts.init($("#jzb")[0]); var data = []; for (var i = 0; i <= 100; i++) { var theta = i / 100 * 360; var r = 5 * (1 + Math.sin(theta / 180 * Math.PI)); data.push([r, theta]); } var jzboption = { title: { text: '極座標雙數值軸' }, legend: { data: ['line'] }, polar: {}, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, angleAxis: { type: 'value', startAngle: 0 }, radiusAxis: { }, series: [{ coordinateSystem: 'polar', name: 'line', type: 'line', data: data }] }; jzb.setOption(jzboption); </script> </div> <div class="col-xs-4"> <h3>瀏覽器佔比</h3> <div id="llqzb" style="width: 500px;height: 400px;"></div> <script type="text/javascript"> var llqzb = echarts.init($("#llqzb")[0]); var llqzboption = { title: { text: '瀏覽器佔比變化', subtext: '純屬虛構', x:'right', y:'bottom' }, tooltip: { trigger: 'item', backgroundColor : 'rgba(0,0,250,0.2)' }, legend: { data: (function (){ var list = []; for (var i = 1; i <=28; i++) { list.push(i + 2000); } return list; })() }, visualMap: { color: ['red', 'yellow'] }, radar: { indicator : [ { text: 'IE8-', max: 400}, { text: 'IE9+', max: 400}, { text: 'Safari', max: 400}, { text: 'Firefox', max: 400}, { text: 'Chrome', max: 400} ] }, series : (function (){ var series = []; for (var i = 1; i <= 28; i++) { series.push({ name:'瀏覽器（資料純屬虛構）', type: 'radar', symbol: 'none', itemStyle: { normal: { lineStyle: { width:1 } }, emphasis : { areaStyle: {color:'rgba(0,250,0,0.3)'} } }, data:[ { value:[ (40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 9, i * i /2 ], name:i + 2000 } ] }); } return series; })() }; llqzb.setOption(llqzboption); </script> </div> </body> </html>
總結
echarts資料可以在設定引數的時候繫結，也可以通過非同步獲取的方式繫結。具體請參考相關的API。
生生不息，學無止境！同學習，共進步！如有興趣加加QQ群：186841119 一起交流學習。