图像渐变色
图像渐变通过修改series中的areaStyle来达到目的:
color : {
type:'linear',//线性渐变
x:0,//各个方向的颜色属性
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',//触发类型：轴触发
//axis：鼠标hover到图上则显示触发到的提示框（鼠标不必放在数据点上）
//item：则鼠标hover到折线点显示相应数据（鼠标必须放在数据点上，移开消失）
axisPointer: {
type:'cross',
//坐标轴指示器的类型
//'line' 直线指示器
//'shadow' 阴影指示器
//'cross' 十字准星指示器
label: {
backgroundColor:'#6a7985'
}
},
extraCssText://提示框的大小以及样式
'width:130px;' +'box-shadow:0 0 8px rgba(5, 52, 123, 0.2);',
formatter:function(params){//格式化函数
var intPart =Number(params[0].value) -Number(params[0].value)%1;//获取整数部分
var intPartFormat =intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');//将数字按照三位划分，用','划分
return//可自定义样式 当trigger为'axis'取得数值为数组形式如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'//字体样式
},
},
