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

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

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
    }
]