设置颜色渐变
给 data 中数据 单独 设置 颜色渐变 data:[{name: "山",value:'60',itemStyle:{}}]
itemStyle: {
normal: {
borderRadius: 4,
borderWidth: 2,
shadowBlur: 0,
// linear 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
// radial 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
// color: '#08E171', // 0% 处的颜色
},
{
offset: 1,
// color: '#82E4B7', // 100% 处的颜色
// color: colorLis2[i],
},
],
global: false, // 缺省为 false
},
},
label 设置不同内容
label: {
show: true,
position: 'outside',
// formatter:'icon|} {b|{b}} \n {c| {d}}'
formatter:function (data) { //自定义,加个判断 渲染不同样式 配🍱
if(data.name=="视频广告"){
return '{icon|}{b|' + data.name + '}' + '\n' + '{c|' + data.value +'}'
}else{
return '{dask|} {b2|' + data.name + '}'+' \n' +' {c|' +data.value +'%'+'}'
}
},
rich:{
b:{
color:'red',
fontSize:12
},
c:{
color:'#000'
},
b2:{
color:'green',
fontSize:12
},
icon:{
backgroundColor:{
image:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
},
height:20
},
dask:{
backgroundColor:{
image:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
},
height:20
}
}
},
// 线条
labelLine: {
show: true
},