圖像漸變色
圖像漸變通過修改series中的areaStyle來達(dá)到目的:
color : {
type:'linear',//線性漸變
x:0,//各個(gè)方向的顏色屬性
y:0,
x2:0,
y2:1,
colorStops: [{
offset:0,color:'rgba(101, 185, 250, 1)'// 0% 處的顏色
? }, {
offset:1,color:'rgba(255,255,255, 0)' // 100% 處的顏色
? }],
global:false // 缺省為false
}
tootip自定義
tooltip:{
trigger:'axis',//觸發(fā)類型：軸觸發(fā)
//axis：鼠標(biāo)hover到圖上則顯示觸發(fā)到的提示框（鼠標(biāo)不必放在數(shù)據(jù)點(diǎn)上）
//item：則鼠標(biāo)hover到折線點(diǎn)顯示相應(yīng)數(shù)據(jù)（鼠標(biāo)必須放在數(shù)據(jù)點(diǎn)上坠七，移開消失）
axisPointer: {
type:'cross',
//坐標(biāo)軸指示器的類型
//'line'?直線指示器
//'shadow'?陰影指示器
//'cross'?十字準(zhǔn)星指示器
label: {
backgroundColor:'#6a7985'
? ? }
},
extraCssText://提示框的大小以及樣式
'width:130px;' +'box-shadow:0 0 8px rgba(5, 52, 123, 0.2);',
formatter:function(params){//格式化函數(shù)
var intPart =Number(params[0].value) -Number(params[0].value)%1;//獲取整數(shù)部分
? ? var intPartFormat =intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');//將數(shù)字按照三位劃分二驰，用','劃分
return//可自定義樣式 當(dāng)trigger為'axis'取得數(shù)值為數(shù)組形式如params[0].name凫海；若為item則為params.name
//空格無法直接加入，需使用 
?'<span style="font-size: 14px;color:#6F7883;line-height: 27px;font-weight: 600;"> '+ params[0].name +"</span><br>" +
'<span style="color: #FD6941;font-size: 15px;line-height: 27px;font-weight: 600;"> ' +intPartFormat +''
? },
backgroundColor :'#fff',//背景顏色
borderColor:'rgba(101,185,250,0.91)',//邊框顏色
textStyle: {
color:'#000'//字體樣式
? },
},
