使用jq來初始化echarts
阿新 • • 發佈：2018-11-01
echarts如何使用請參考http://echarts.baidu.com/examples/
jq版本:1.8.3
echarts版本:3.5.2
下面給出一份演示
如果要看效果應該引入對應的庫檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="jquery.min.js"></script> <!--引入echarts--> <script src="echarts.js"></script> </head> <body> <div style="width: 500px;height: 500px" id="demo"> </div> <div style="width: 500px;height: 500px" class="demo"> </div> <div style="width: 500px;height: 500px" class="demo"> </div> <div style="width: 500px;height: 500px" class="demo"> </div> <script type="text/javascript"> $.fn.jqEcharts=function(Obj){ var defaultObj={ option:null }; $.extend(defaultObj,Obj); var arr= new Array(); var O =null; if(this.length==0){ return console.log("jq is not find element"); } $.each(this,function(){ O = echarts.init(this); O.setOption(defaultObj.option); O.ele=this; arr.push(O); }); return arr; }; /*初始化單個*/ //單個返回的是一個echarts的物件 $("#demo").jqEcharts({ option: { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } }); /*初始化多個*/ //多個返回的是一個echarts的陣列 $(".demo").jqEcharts({ option: { title: { text: '堆疊區域圖' }, tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data:['郵件營銷','聯盟廣告','視訊廣告','直接訪問','搜尋引擎'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['週一','週二','週三','週四','週五','週六','週日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'郵件營銷', type:'line', stack: '總量', areaStyle: {normal: {}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'聯盟廣告', type:'line', stack: '總量', areaStyle: {normal: {}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'視訊廣告', type:'line', stack: '總量', areaStyle: {normal: {}}, data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接訪問', type:'line', stack: '總量', areaStyle: {normal: {}}, data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜尋引擎', type:'line', stack: '總量', label: { normal: { show: true, position: 'top' } }, areaStyle: {normal: {}}, data:[820, 932, 901, 934, 1290, 1330, 1320] } ] } }); /*如果想要讓初始化的多個節點的echarts內容不一樣應該用返回的陣列去修改*/ /*所有返回物件 或者 物件陣列中的物件都新增了一個屬性叫ele 表示jq選擇到的節點是原生js的dom物件*/ </script> </body> </html>
其實echarts採用的節點物件是jq偽陣列的元素我們只需要迴圈節點就可以初始化echarts了