echarts 部分美化配置项使用记录

时间:2022-09-07 10:08:05

一、图表背景色配置项,如背景颜色渐变

https://www.echartsjs.com/zh/option.html#backgroundColor

二、图表中图形的颜色,如柱状图行采用渐变颜色显示

  

options = {
series: [
{
name: '财经新闻',
barWidth: '30%',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: [10, 10, 10, 10],//圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。 顺时针左上,右上,右下,左下
color: {//同图表背景色配置一样 https://www.echartsjs.com/zh/option.html#backgroundColor
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#4D29D3' // 0% 处的颜色
}, {
offset: 1, color: '#BE58F9' // 100% 处的颜色
}],
global: false // 缺省为 false
},
}
},
}
],
}

三、折线图折点、填充区域的美化

series: [
{
symbol:'circle',//折线点的图形 //https://www.echartsjs.com/zh/option.html#series-line.symbol
symbolSize:10, //折线点的大小 //https://www.echartsjs.com/zh/option.html#series-line.symbolSize
areaStyle: {...}//区域填充样式 //https://www.echartsjs.com/zh/option.html#series-line.areaStyle
}
]