之前自學(xué)的時候也使用過echarts來制作柱狀圖，折線圖，地圖，現(xiàn)在想想那時候做的簡直是太LOW了，就是簡單的在官網(wǎng)上，模仿人家的示例代碼，改改數(shù)據(jù)，就可以了，原生態(tài)的，樣子果然是很丑。
在我們的項目中，我們自己封裝了echarts指令，只用自己定義一下樣式，然后調(diào)用數(shù)據(jù)接口，就可以了，這里先不多說封裝指令了，現(xiàn)在先說說怎么調(diào)整樣式
我自己寫的一個代碼為例，以折線圖為例
一 . 問題匯總： 折線圖問題與解決
折線圖中的多條折線，怎么設(shè)置？
怎么設(shè)置echarts的背景顏色？
怎么設(shè)置X軸，Y軸的坐標(biāo)線的顏色？
怎么將X軸的數(shù)據(jù)傾斜顯示？
怎么讓你的折線有弧度？
初始樣式如圖，以及要解決的問題：
我的博客地址 http://blog.zhouminghang.xyz
二.? 前提準(zhǔn)備條件
要使用echarts，首先要在你的頁面中引入echarts.js；
要在.html文件中，設(shè)置一個容器，并給它設(shè)置寬高屬性；
再次聲明，必須給容器設(shè)置寬高，它是用來給畫布提供一個空間，否則是不會顯示的；
最后就是關(guān)于echarts的配置；
可以單獨寫一個js文件，然后引進來；
也可以直接在index.html中寫一個 // 相關(guān)代碼
index.html文件代碼如下：
我這里圖方便，js就直接寫在html文件里了
// 獲取到這個DOM節(jié)點，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的內(nèi)容基本涵蓋你要畫的圖表的所有內(nèi)容varoption = {// 定義樣式和數(shù)據(jù)}// 一定不要忘了這個，具體是干啥的我忘了，官網(wǎng)是這樣寫的使用剛指定的配置項和數(shù)據(jù)顯示圖表。? myChart.setOption(option);
注意：
你在寫myChart.setOption(option);這行代碼的時候一定不要忘了這個myChart是要和你上面定義的var 變量名對應(yīng)起來，比如var myChart = echarts.init(document.getElementById("box"));
舉個栗子吧：
如果你定義的變量名是oMyChart,那你就這樣寫：
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:['充值','消費']? ? ? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? 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:'消費',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type:'line',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? symbol:'none',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? smooth:0.2,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:['#90EC7D'],? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data:[600,300,400,200,300,300,200,400]? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? ? ? ? };
三. 問題解決
3.1 怎么給echarts的容器添加背景色？
這是我碰到的第一個坑，你是不是和我一樣，直接給容器添加了background-color屬性，但是你會發(fā)現(xiàn)并沒有什么卵用
代碼如下：
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
你會發(fā)現(xiàn)背景色應(yīng)用不上，這里我自己認為，echarts畫折線圖什么的，就相當(dāng)于是使用canvas在畫圖，它在畫圖前已經(jīng)將畫布初始化了，所以給容器添加背景色是不行的，那么怎么辦呢？
解決辦法：
要在optionecharts圖的配置中進行配置，添加background-color屬性；
為了區(qū)別，看看到底是給容器添加的背景色應(yīng)用上了，還是option中的背景色應(yīng)用上了；
我們設(shè)置容器背景為粉色，設(shè)置echarts中的option為#FBFBFB；
代碼如下：
// 獲取到這個DOM節(jié)點，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的內(nèi)容基本涵蓋你要畫的圖表的所有內(nèi)容// 定義樣式和數(shù)據(jù)varoption = {// 給echarts圖設(shè)置背景色backgroundColor:'#FBFBFB',// -----------> // 給echarts圖設(shè)置背景色? tooltip: {trigger:'axis'},legend: {data: ['充值','消費']? ? ? ? },calculable:true,xAxis: [{type:'category',// boundaryGap: false,data:function(){varlist = [];for(vari =10; i
區(qū)別以及效果：
在這里我同時給容器添加背景色，在echarts配置中設(shè)置背景色，一會我們看看是哪個背景色作用上了，代碼如下：
我的博客地址 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 去掉小圓點
設(shè)置symbol: 'none'
代碼對比：
我的博客地址 http://blog.zhouminghang.xyz
效果對比：
我的博客地址 http://blog.zhouminghang.xyz
3.4 設(shè)置折線圖的弧度
設(shè)置smooth屬性
屬性值在0-1之間
代碼對比圖：
我的博客地址 http://blog.zhouminghang.xyz
效果對比圖：
我的博客地址 http://blog.zhouminghang.xyz
3.5 設(shè)置坐標(biāo)軸的顏色
為了讓效果顏色更加明顯，就給坐標(biāo)軸添加比較顯眼的顏色，只做個示范用，項目中肯定不會用這么重的顏色，一般使用灰色系的顏色比較淡的
設(shè)置X軸顏色為紅色
在xAxis下添加
axisLine: {lineStyle: {? ? ? ? ? ? ? ? ? ? color:'red'}? ? ? ? ? ? },
同理設(shè)置Y軸
代碼：
我的博客地址 http://blog.zhouminghang.xyz
效果圖：
我的博客地址 http://blog.zhouminghang.xyz
3.6 怎么讓折線圖從X軸0刻度開始
設(shè)置boundaryGap: false,
代碼如下：
我的博客地址 http://blog.zhouminghang.xyz
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
3.7 怎么讓X軸的時間這組數(shù)據(jù)旋轉(zhuǎn)
有時候我們X軸數(shù)據(jù)比較長又比較多的時候，水平放置肯定成不下，那我們就讓它傾斜著放，這樣就可以放更多的數(shù)據(jù)。
好了，廢話不多說，看代碼：
我的博客地址 http://blog.zhouminghang.xyz
效果如圖：
我的博客地址 http://blog.zhouminghang.xyz
四.? 突然發(fā)現(xiàn)我寫的有個小問題，少了一組數(shù)據(jù)，很尷尬的趕腳
你可以直接在data中添加一組數(shù)據(jù)
哈哈，我比較懶，就直接修改那個判斷條件，將i<=18改成i<18;
完整的代碼如下：
// 獲取到這個DOM節(jié)點，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的內(nèi)容基本涵蓋你要畫的圖表的所有內(nèi)容varoption = {// 定義樣式和數(shù)據(jù)backgroundColor:'#FBFBFB',tooltip: {trigger:'axis'},legend: {data: ['充值','消費']? ? ? ? },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.itdecent.cn/p/8cac22daca98
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
