前言
最近項目里面遇到一些圖表需要用echarts來做。而我之前只用過一次echarts,也只是做了一個簡單的餅狀圖，并沒有涉及到很多的配置。但是現在這個項目，這些圖表需要自己配置很多東西。像什么多余的網格線不顯示啊，每個柱子的不一樣的顏色漸變啊，這些都還好。問題在一個頁面有多個柱狀圖，而這些柱狀圖除了數據和顏色不一樣其他的都一毛一樣。最后模仿老大做的整合多個option自己做了一個demo，自己寫了詳細的注釋。
效果圖如下：
html代碼如下：
<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om --> <div id="chart1" style="width: 300px;height:300px;"></div> <div id="chart2" style="width: 300px;height:300px;"></div> <div id="chart3" style="width: 300px;height:300px;"></div> <div id="chart4" style="width: 300px;height:300px;"></div> <script src="aa.js"></script> <script> new aa(); </script>
js代碼如下：
function aa(){ //初始化加載圖表 this.initchart();}aa.prototype = { initchart:function(){ //定義每個圖表的顏色數組，我這里是漸變色的柱子，有四個 var color = [ "#ad3f3b", "#df8380","#89a54e","#b7c894","#3c8d91","#78b1b5","#db853c","#f2b582"]; var dex = 0; //遍歷裝圖表的盒子 for(var i = 1; i <= 4; i++){ //把echarts初始化圖表的方法提出來通過拼接id的方法找到每個div的id var chart = echarts.init(document.getElementById('chart'+ i)); //把option做成一個變量，通過傳參來初始化每個圖 new echarts.graphic.LinearGradient是eachsrts柱子漸變的方法 //傳遞的參數有圖表的名字，漸變的顏色，和所對應的單位 var option = this.optionFun("銷售額", new echarts.graphic.LinearGradient(0,0,0,1,[ {offset:0,color: color[dex++]}, {offset:1,color:color[dex++]} ]), "單位"); //常規操作 為echarts對象加載數據 chart.setOption(option); } }, //然后接下來都是一些echarts的一些常規配置 optionFun:function(title,color,unit){ var option = { title:{ text:title, left:'center', textStyle:{ fontStyle:'normal', fontSizeL:'14px', }, top:'top', }, xAxis:{ type:'category', data:['目標','完成'], axisLine:{ lineStyle:{ color:'#999', }, }, axisLabel:{ textStyle:{ color:'#333', }, }, }, yAxis:{ type:'value', name:unit, nameLocation:'start', nameTextStyle:{ color:'#333', }, axisLine:{ lineStyle:{ color:'#999', } }, axisLabel:{ textStyle:{ color:'#333', }, }, splitLine:{ show:false, }, }, series:[{ data:data,//后臺傳過來的數據[98,57] type:'bar', barWidth:20, itemStyle:{ normal:{ color:color, barBorderRadius:2, shadowColor:'rgba(4,13,31,0.5)', shadowBlur:5, shadowOffsetX:2, shadowOffsetY:0, label:{ show:true, position:'top', textStyle:{ color:'#333', }, }, } } }], }; //將option返回 return option; }}其實后來發現，echarts一些常規的配置在官方給的文檔里面都有，就是自己不太熟悉。最主要的還是自己掌握的東西太少了，不懂的融會貫通。也更加清楚了js對于一個前端來說是多么的重要。而我自己也在不斷的努力中，很感謝我老大，很多不懂的地方問他，他都會幫我解決。繼續加油吧。
注：這個配置目前不支持圖表數量超過所定義的顏色數量后顏色循環，或許以后多研究下可以實現，但是目前是不支持的。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
