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