各屬性

itemStyle

itemStyle用于設置通用樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等；

itemStyle:{emphasis:{shadowBlur:200,//陰影的大小shadowOffsetX:10,//陰影水平方向上的偏移shadowOffsetY:10,//陰影垂直方向上的偏移shadowColor:'rgba(0,0,0,0.5)'//陰影顏色} }

emphasis是鼠標hover時候的高亮樣式。

setOption vs lable.textStyle

在option中可以設置全局的背景顏色和文本顏色。backgroundColor

setOption({backgroundColor:'#2c343c',//背景顏色textStyle:{color:'rgba(255,255,255,0.3)'//文本顏色} })

也可以在每個系列中分別設置，每個系列的文本設置在lable.textStyle.

lable:{textStyle:{//設置文本顏色color:'rgba(255,255,255,0.5)'} }

餅圖的話還可以將標簽的視覺引導線顏色設置為淺色：

labelLine:{lineStyle:{//引導線顏色color:'rgba(255,255,255,0.3)'} }

label和labelLine的樣式也有emphasis狀態。

餅狀圖的扇形顏色設置，itemStyle設置全局扇形顏色，data下設置數據項實現，以及visualMap將數值大小映射到明暗度。

itemStyle:{//全局設置,置于option中color:'c23531',shadowBlur:200,shadowColor:'rgba(0,0,0,0.5)' } ===================================================== data:[{//data數據設置value:400,name:'搜索引擎',itemStyle:{color:'c23531'} },...] ===================================================== visualMap:{//數值大小范圍映射show:false,min:80,max:600,inRange:{colorLightness:[0,1]} }

樣式簡介

顏色主題、調色盤、直接樣式設置（itemStyle\lineStyle\areaStyle、label...）、視覺映射(visualMap)

主題Theme

最簡單的更改全局樣式的方式，直接采用顏色主題。

var chart=echarts.init(dom,'light');//light和dark兩套主題,或者自己加載

調色盤

可以在option中設置，給定了一組顏色，圖形、系列會自動從其中選擇顏色。可以設置全局的調色盤，也可以設置系列自己專屬的調色盤。

option={color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a'],//全局調色盤series:[{type:'bar',//系列調色盤color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a'},{type:'bar',color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a']},{...}] }

直接的樣式設置

itemStyle,lineStyle,areaStyle,label,...可以直接設置圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等等。

一般來說，Echarts的各個系列和組件，都遵從這些命名習慣；

高亮樣式：emphasis

visualMap:

圖形類別symbol、圖形大小symbolSize、顏色color、透明度opacity、顏色透明度colorAlpha、顏色明暗度colorLightness、顏色飽和度colorSaturation、色調colorHue

?

?

總結

以上是生活随笔為你收集整理的Echarts 3使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。