Echart4 漸變色使用方法

 在使用echarts繪製圖表時, 若是須要使用漸變色, 則應使用echarts內置的漸變色生成器echarts.graphic.LinearGradient

<div id="barchart1" style="height:350px;"></div>

<script type = "text/javascript" >
    // 指定圖表的配置項和數據
    var option = {
        legend: {
            data: ['用量統計'],
        },
        tooltip: {},

        xAxis: {
            data: ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {},
        series: [{
            name: '用量統計',
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
                normal: {
                    barBorderRadius: [10, 10, 10, 10],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, // 至關於2點的位置 A(0, 0)  B(1, 0)
                        [
                            { offset: 0, color: '#048BFE' }, // A點的顏色
                            { offset: 1, color: '#00EEF1' } // B點的顏色
                        ]
                    ),
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        }
                    }
                }
            },
            data: [11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22],
        }]
    };
var myChart = echarts.init(document.getElementById('barchart1'), theme);
myChart.setOption(option);
ObjectResize(myChart.resize);

function ObjectResize(fn) {
    if (window.addEventListener) {
        window.addEventListener('resize', fn, false);
    } else {
        window.attachEvent('onresize', fn)
    }
}
</script>