之前自學(xué)的時(shí)候也使用過(guò)echarts來(lái)制作柱狀圖卜壕，折線圖，地圖烙常，現(xiàn)在想想那時(shí)候做的簡(jiǎn)直是太LOW了轴捎，就是簡(jiǎn)單的在官網(wǎng)上，模仿人家的示例代碼蚕脏，改改數(shù)據(jù)侦副，就可以了，原生態(tài)的驼鞭，樣子果然是很丑秦驯。
在我們的項(xiàng)目中，我們自己封裝了echarts指令挣棕，只用自己定義一下樣式译隘，然后調(diào)用數(shù)據(jù)接口，就可以了洛心，這里先不多說(shuō)封裝指令了固耘，現(xiàn)在先說(shuō)說(shuō)怎么調(diào)整樣式
我自己寫(xiě)的一個(gè)代碼為例，以折線圖為例
一 . 問(wèn)題匯總： 折線圖問(wèn)題與解決
折線圖中的多條折線皂甘，怎么設(shè)置玻驻？
怎么設(shè)置echarts的背景顏色？
怎么設(shè)置X軸，Y軸的坐標(biāo)線的顏色璧瞬？
怎么將X軸的數(shù)據(jù)傾斜顯示户辫？
怎么讓你的折線有弧度？
初始樣式如圖嗤锉，以及要解決的問(wèn)題：
我的博客地址 http://blog.zhouminghang.xyz
二.? 前提準(zhǔn)備條件
要使用echarts渔欢，首先要在你的頁(yè)面中引入echarts.js；
要在.html文件中瘟忱，設(shè)置一個(gè)容器奥额，并給它設(shè)置寬高屬性；
再次聲明访诱，必須給容器設(shè)置寬高垫挨，它是用來(lái)給畫(huà)布提供一個(gè)空間，否則是不會(huì)顯示的触菜；
最后就是關(guān)于echarts的配置九榔；
可以單獨(dú)寫(xiě)一個(gè)js文件，然后引進(jìn)來(lái)涡相；
也可以直接在index.html中寫(xiě)一個(gè) // 相關(guān)代碼
index.html文件代碼如下：
我這里圖方便哲泊，js就直接寫(xiě)在html文件里了
// 獲取到這個(gè)DOM節(jié)點(diǎn)，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的內(nèi)容基本涵蓋你要畫(huà)的圖表的所有內(nèi)容varoption = {// 定義樣式和數(shù)據(jù)}// 一定不要忘了這個(gè)催蝗，具體是干啥的我忘了切威，官網(wǎng)是這樣寫(xiě)的使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。? myChart.setOption(option);
注意：
你在寫(xiě)myChart.setOption(option);這行代碼的時(shí)候一定不要忘了這個(gè)myChart是要和你上面定義的var 變量名對(duì)應(yīng)起來(lái)丙号，比如var myChart = echarts.init(document.getElementById("box"));
舉個(gè)栗子吧：
如果你定義的變量名是oMyChart,那你就這樣寫(xiě)：
varoMyChart = echarts.init(document.getElementById("box"));varoption = {// 定義樣式和數(shù)據(jù)}oMyChart.setOption(option);
關(guān)鍵內(nèi)容都在option中
varoption = {? ? ? ? ? ? ? ? ? ? ? ? backgroundColor:'#FBFBFB',? ? ? ? ? ? ? ? ? ? ? ? tooltip : {? ? ? ? ? ? ? ? ? ? ? ? ? ? trigger:'axis'},? ? ? ? ? ? ? ? ? ? ? ? legend: {? ? ? ? ? ? ? ? ? ? ? ? ? ? data:['充值','消費(fèi)']? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? calculable :true,? ? ? ? ? ? ? ? ? ? ? ? xAxis : [? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? axisLabel:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? rotate:30,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? interval:0},? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? axisLine:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? lineStyle :{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'#CECECE'}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type :'category',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? boundaryGap :false,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data :function(){varlist= [];for(vari =10; i <=18; i++) {if(i<=12){list.push('2016-'+i +'-01');? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{list.push('2017-'+(i-12) +'-01');? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }returnlist;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }()? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ],? ? ? ? ? ? ? ? ? ? ? ? yAxis : [? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type :'value',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? axisLine:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? lineStyle :{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'#CECECE'}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ],? ? ? ? ? ? ? ? ? ? ? ? series : [? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'充值',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type:'line',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? symbol:'none',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? smooth:0.2,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:['#66AEDE'],? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data:[800,300,500,800,300,600,500,600]? ? ? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'消費(fèi)',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type:'line',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? symbol:'none',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? smooth:0.2,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:['#90EC7D'],? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data:[600,300,400,200,300,300,200,400]? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? ? ? ? };
三. 問(wèn)題解決
3.1 怎么給echarts的容器添加背景色先朦？
這是我碰到的第一個(gè)坑，你是不是和我一樣犬缨，直接給容器添加了background-color屬性烙无，但是你會(huì)發(fā)現(xiàn)并沒(méi)有什么卵用
代碼如下：
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
你會(huì)發(fā)現(xiàn)背景色應(yīng)用不上，這里我自己認(rèn)為遍尺，echarts畫(huà)折線圖什么的，就相當(dāng)于是使用canvas在畫(huà)圖涮拗，它在畫(huà)圖前已經(jīng)將畫(huà)布初始化了乾戏，所以給容器添加背景色是不行的，那么怎么辦呢三热？
解決辦法：
要在optionecharts圖的配置中進(jìn)行配置鼓择，添加background-color屬性；
為了區(qū)別就漾，看看到底是給容器添加的背景色應(yīng)用上了呐能，還是option中的背景色應(yīng)用上了；
我們?cè)O(shè)置容器背景為粉色，設(shè)置echarts中的option為#FBFBFB摆出；
代碼如下：
// 獲取到這個(gè)DOM節(jié)點(diǎn)朗徊，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的內(nèi)容基本涵蓋你要畫(huà)的圖表的所有內(nèi)容// 定義樣式和數(shù)據(jù)varoption = {// 給echarts圖設(shè)置背景色backgroundColor:'#FBFBFB',// -----------> // 給echarts圖設(shè)置背景色? tooltip: {trigger:'axis'},legend: {data: ['充值','消費(fèi)']? ? ? ? },calculable:true,xAxis: [{type:'category',// boundaryGap: false,data:function(){varlist = [];for(vari =10; i
區(qū)別以及效果：
在這里我同時(shí)給容器添加背景色，在echarts配置中設(shè)置背景色偎漫，一會(huì)我們看看是哪個(gè)背景色作用上了爷恳，代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
很顯然，配置里的背景色應(yīng)用上了象踊，所以直接給容器設(shè)置背景是行不通的温亲，效果如圖所示：
我的博客地址 http://blog.zhouminghang.xyz
3.2 怎么設(shè)置多條折線以及每條折線的顏色
在series中以數(shù)組形式添加多組數(shù)據(jù)即可；
在每條折線里面直接添加color: ['相應(yīng)的顏色']
代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
效果圖如下：
我的博客地址 http://blog.zhouminghang.xyz
3.3 去掉小圓點(diǎn)
設(shè)置symbol: 'none'
代碼對(duì)比：
我的博客地址 http://blog.zhouminghang.xyz
效果對(duì)比：
我的博客地址 http://blog.zhouminghang.xyz
3.4 設(shè)置折線圖的弧度
設(shè)置smooth屬性
屬性值在0-1之間
代碼對(duì)比圖：
我的博客地址 http://blog.zhouminghang.xyz
效果對(duì)比圖：
我的博客地址 http://blog.zhouminghang.xyz
3.5 設(shè)置坐標(biāo)軸的顏色
為了讓效果顏色更加明顯杯矩，就給坐標(biāo)軸添加比較顯眼的顏色栈虚，只做個(gè)示范用，項(xiàng)目中肯定不會(huì)用這么重的顏色史隆，一般使用灰色系的顏色比較淡的
設(shè)置X軸顏色為紅色
在xAxis下添加
axisLine: {lineStyle: {? ? ? ? ? ? ? ? ? ? color:'red'}? ? ? ? ? ? },
同理設(shè)置Y軸
代碼：
我的博客地址 http://blog.zhouminghang.xyz
效果圖：
我的博客地址 http://blog.zhouminghang.xyz
3.6 怎么讓折線圖從X軸0刻度開(kāi)始
設(shè)置boundaryGap: false,
代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
3.7 怎么讓X軸的時(shí)間這組數(shù)據(jù)旋轉(zhuǎn)
有時(shí)候我們X軸數(shù)據(jù)比較長(zhǎng)又比較多的時(shí)候魂务，水平放置肯定成不下，那我們就讓它傾斜著放逆害，這樣就可以放更多的數(shù)據(jù)头镊。
好了，廢話不多說(shuō)魄幕，看代碼：
我的博客地址 http://blog.zhouminghang.xyz
效果如圖：
我的博客地址 http://blog.zhouminghang.xyz
四.? 突然發(fā)現(xiàn)我寫(xiě)的有個(gè)小問(wèn)題相艇，少了一組數(shù)據(jù)，很尷尬的趕腳
你可以直接在data中添加一組數(shù)據(jù)
哈哈纯陨，我比較懶坛芽，就直接修改那個(gè)判斷條件，將i<=18改成i<18;
完整的代碼如下：
// 獲取到這個(gè)DOM節(jié)點(diǎn)翼抠，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的內(nèi)容基本涵蓋你要畫(huà)的圖表的所有內(nèi)容varoption = {// 定義樣式和數(shù)據(jù)backgroundColor:'#FBFBFB',tooltip: {trigger:'axis'},legend: {data: ['充值','消費(fèi)']? ? ? ? },calculable:true,xAxis: [{axisLabel: {rotate:30,interval:0},axisLine: {lineStyle: {color:'red'}? ? ? ? ? ? },type:'category',boundaryGap:false,data:function(){varlist = [];for(vari =10; i
效果如圖：
鏈接：http://www.reibang.com/p/8cac22daca98
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有咙轩。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處阴颖。
