Echarts柱狀圖每個(gè)柱設(shè)置不同的顏色 效果如下圖
image.png
series:[
{
name:'郵箱',
type:'bar',
barWidth:'60%',
label:{
normal:{
show:true,
position:'top'
}
},
itemStyle:{
normal:{
color:function(params){
letcolorList=[
'#1c88c9',
'#2e5399',
'#9f4176',
'#2c7c7d',
'#2ab1b5',
];
returncolorList[params.dataIndex];
}
//每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng)从橘，如果柱子數(shù)目多于colorList的長(zhǎng)度，則柱子顏色循環(huán)使用該數(shù)組
},
},
data:[22,55,22,55,666]
},
]
Echarts取消網(wǎng)格線
image.png
xAxis:{
type:'value',
show:false,
splitLine:{
show:false
}
}
比如X軸的設(shè)置 show屬性是設(shè)置X軸是否顯示 splitLine是設(shè)置網(wǎng)格線是否顯示
然后如上圖 要使Y軸是柱型數(shù)據(jù)
Echarts設(shè)置漸變色
image.png
series:[
{
type:'bar',
barWidth:'30%',
itemStyle:{
normal:{
//重點(diǎn)在于利用Echarts內(nèi)置的漸變色生成器础钠，其中
color:new echarts.graphic.LinearGradient(
1,0,0,1,
[
{offset:1,color:'#14c8d4'},
{offset:0,color:'#43eec6'}
]
),
//有關(guān)shadow的屬性用來(lái)設(shè)置陰影顏色及偏移
shadowBlur:10,
shadowColor:'rgba(67,138,298,0.3)',
shadowOffsetX:[1],
shadowOffsetY:[1],
},
},
]
南丁格爾圖恰力，通過(guò)半徑區(qū)分?jǐn)?shù)據(jù)大小
可選擇兩種模式：
'radius' 扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比，半徑展現(xiàn)數(shù)據(jù)的大小旗吁。
'area' 所有扇區(qū)圓心角相同踩萎，僅通過(guò)半徑展現(xiàn)數(shù)據(jù)大小。
image.png
關(guān)鍵代碼如下:
series : [
{
roseType: 'radius'
}
]
比較復(fù)雜的label寫法
image.png
series: [
{
name:'訪問(wèn)來(lái)源',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|很钓：}{c} {per|b74lthq%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
}
]
配置餅圖的顏色 線性漸變或者自定義圖片背景
image.png
image.png
// 線性漸變香府，前四個(gè)參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比码倦，如果 globalCoord 為 `true`企孩，則該四個(gè)值是絕對(duì)的像素位置
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 處的顏色
}, {
offset: 1, color: 'blue' // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
}
// 徑向漸變，前三個(gè)參數(shù)分別是圓心 x, y 和半徑袁稽，取值同線性漸變
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 處的顏色
}, {
offset: 1, color: 'blue' // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
}
// 紋理填充
color: {
image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement勿璃，不支持路徑字符串
repeat: 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
關(guān)于tooltip的位置可能超出圖表容器
未超出.png
已超出容器.png
設(shè)置tooltip的位置 代碼如下
// 絕對(duì)位置，相對(duì)于容器左側(cè) 10px, 上側(cè) 10 px
position: [10, 10]
// 相對(duì)位置，放置在容器正中間
position: ['50%', '50%']
position: function (point, params, dom, rect, size) {
// 固定在頂部
return [point[0], '10%'];
}
參數(shù)：
point: 鼠標(biāo)位置补疑，如 [20, 40]歧沪。
params: 同 formatter 的參數(shù)相同。
dom: tooltip 的 dom 對(duì)象莲组。
rect: 只有鼠標(biāo)在圖形上時(shí)有效诊胞，是一個(gè)用x, y, width, height四個(gè)屬性表達(dá)的圖形包圍盒。
size: 包括 dom 的尺寸和 echarts 容器的當(dāng)前尺寸锹杈，例如：{contentSize: [width, height], viewSize: [width, height]}撵孤。
返回值：
可以是一個(gè)表示 tooltip 位置的數(shù)組，數(shù)組值可以是絕對(duì)的像素值竭望，也可以是相 百分比邪码。
也可以是一個(gè)對(duì)象，如：{left: 10, top: 30}市框，或者 {right: '20%', bottom: 40}霞扬。
