Vue使用Echart圖標插件之柱狀圖

第Vue使用Echart圖標插件之柱狀圖Echart是一個很好的圖表繪制插件，里面有各種各樣的圖表供我們選擇，最近用echart做圖表比較多，所以現(xiàn)在記錄一下用到的柱狀圖用到的一些配置和用法：

主要注意的點：

1、創(chuàng)建的畫布必須給定大小，不然無法顯示

2、xAxis中的data默認為空時，X軸的的描述不存在，xAxis中axisLabel的interval的值表示隔幾列顯示，默認為1

3、Series就是圖表的數(shù)據(jù)中心，data是傳入的數(shù)據(jù)，可以通過barMaxWidth設(shè)置柱子的寬度

4、重點是柱子的顏色Series中itemStyle的color就是用來設(shè)置柱子的顏色的，如果柱子要使用不同的顏色那么需要先自定義一個數(shù)組來存放顏色字符串，然后通過遍歷的方法進行顏色的渲染

好了，廢話不多說直接上代碼，代碼的注釋很詳細，應(yīng)該能看得懂。

template

div

div

工程發(fā)貨統(tǒng)計

span(近六天)/span

/div

divref="chart"/div!--必須設(shè)置寬高--

/div

/template

script

importechartsfrom"echarts";

exportdefault{

data(){

return{

colorList:[

//設(shè)置發(fā)貨柱子的，普通的柱子顏色

"#69D3BE",

"#9D9E9F",

"#F88282"

],

colorList2:[

//設(shè)置發(fā)貨柱子的，柱子實現(xiàn)漸變色

["#0282DE","#3F28D0"],

["#FED701","#E66938"],

["#67E0E3","#0181DE"]

]

};

mounted(){

this.initChart();

methods:{

//初始化圖表樣式

initChart(){

this.chart=echarts.init(this.$refs.chart);

let_this=this;

this.chart.setOption({

grid:{

left:"50"

//right:"60"

},

legend:{

show:false,

data:this.legends

},

tooltip:{

trigger:"axis",

show:true,

axisPointer:{

//坐標軸指示器，坐標軸觸發(fā)有效

type:"shadow"http://默認為直線，可選為：'line'|'shadow'

}

},

xAxis:{

axisLine:{show:false},//軸線

axisTick:{show:false},//刻度

type:"category",

data:["一","二","三","四","五","六"],//X軸顯示

axisLabel:{

color:"#333",

interval:0//0：不隔行顯示，1：隔一行顯示

}

},

yAxis:{

type:"value",

nameTextStyle:{

fontWeight:"bold",

align:"left",

padding:[0,50,10,0],

color:"#ffffff"

},

axisLine:{show:false},//軸線

axisTick:{show:false},//刻度

axisLabel:{

color:"#333",

formatter:`{value}`//Y軸的顯示形式，value，percent

}

},

series:[

{//實現(xiàn)漸變色的柱子

data:["1","2","3","1","2","3"],//顯示的數(shù)據(jù)

type:"bar",

smooth:true,//平滑

symbol:"none",

lineStyle:{

color:"#FF5858"

},

barMaxWidth:30,//設(shè)置柱子的寬度

itemStyle:{

normal:{

label:{

show:true,//開啟顯示

position:"top",//在上方顯示

textStyle:{

//數(shù)值樣式

color:"#222",

fontSize:14

}

},

color:params={

letcolorList=_this.colorList2;//實現(xiàn)柱子的漸變色數(shù)組

letindex=params.dataIndex;//dataIndex

data中數(shù)據(jù)的下標

if(params.dataIndex=colorList.length){

index=params.dataIndex-colorList.length;

}

returnnewecharts.graphic.LinearGradient(0,0,0,1,[//漸變色使用方法

{offset:0,color:colorList[index][0]},

{offset:1,color:colorList[index][1]}

]);

}

}

}

},

{//實現(xiàn)普通色的柱子

data:["2.5","3.5","1.5","2.5","1.5","2.5"],

type:"bar",

smooth:true,//平滑

symbol:"none",

lineStyle:{

color:"#FF5858"

},

barMaxWidth:30,

itemStyle:{

normal:{

label:{

show:true,//開啟顯示

position:"top",//在上方顯示

textStyle:{

//數(shù)值樣式

color:"#222",

fontSize:14

}

},

color:params={

letcolorList=_this.colorList;//柱子的顏色是普通的顏色

letindex=params.dataIndex;

if(params.dataIndex=colorList.length){

index=params.dataIndex-colorList.length;

}

returncolorList[index];

}

}

}

}

]

});

}

/script

style

.count-char