在使用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>
(adsbygoogle = window.adsbygoogle || []).push({});