在使用echarts繪製圖表時, 若是須要使用漸變色, 則應使用echarts內置的漸變色生成器echarts.graphic.LinearGradientjavascript
<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>