echarts 渐变色 tooltip

图像渐变色

图像渐变通过修改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

//空格无法直接加入，需使用 

 '  '+ params[0].name +"
" +

'  ' +intPartFormat +''

  },

backgroundColor :'#fff',//背景颜色

borderColor:'rgba(101,185,250,0.91)',//边框颜色

textStyle: {

color:'#000'//字体样式

  },

},