首页 > 其他分享 >设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色

设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色

时间:2022-12-22 14:01:30浏览次数:58  
标签:color 渐变色 tooltip 柱状图 html rgba series echarts


grid: {
show: false,
left: '0px',
top: '50px',
right: '1px',
bottom: '0px',
containLabel: true,
backgroundColor: 'white',//show: true的时候才显示
borderColor: '#ccc',
borderWidth: 1,
//更多属性访问http://echarts.baidu.com/option.html#grid
}
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
color: "blue"//设置提示框线条颜色
}
},
backgroundColor: "rgba(0,0,0,0.6)",
borderWidth: 1,
borderColor: "rgba(0,2,85,0.8)",
padding: 10,
textStyle: {
color: "blue"

//更多属性访问http://echarts.baidu.com/option.html#tooltip
}
}
/*柱状图渐变色*/
series: [
{
itemStyle: {
normal: {
barBorderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(153,217,234,0)'
}, {
offset: 1,
color: '#3fa7dc'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20,
}
}
},
//更多属性访问http://echarts.baidu.com/option.html#series
]
/*折线图渐变色*/
series: [
{
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68,1)'
}, {
offset: 1,
color: 'rgba(255, 70, 131,0)'
}])
}
}
},
//更多属性访问http://echarts.baidu.com/option.html#series
]

标签:color,渐变色,tooltip,柱状图,html,rgba,series,echarts
From: https://blog.51cto.com/u_15920212/5962857

相关文章