echarts 柱状图渐变色
1、HTML
<div class="line1" id="bar" ref="bar_wrap"></div>
2、style
.line1{
width: 100%;
height: 90%;
min-width: 507px;
min-height: 344px;
}
3、script
import echarts from 'echarts'
import 'echarts/lib/chart/bar'
4、mounted
let myBar = this.$echarts.init(this.$refs.bar_wrap)
myBar.setOption({
color: ['#00daee'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow'
// 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7', '9.8', '9.9', '9.10'],
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#00daee',
width: 1
},
textStyle: {
color: '#ffffff',
fontSize: 25
}
}
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#00daee',
width: 1
},
textStyle: {
color: '#00daee'
// fontSize: 25
}
},
splitLine: {
show: false
}
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: { color: 'rgba(0,0,0,0.05)' }
},
barGap: '-100%',
barCategoryGap: '40%',
animation: false
},
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
itemStyle: {
normal: {
// 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params) {
let index = params.dataIndex
let colorList = [
// 渐变颜色的色值和透明度
// 透明度从0
['rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)'],
// 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
['#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe']
]
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
// 颜色的开始位置
color: colorList[1][index] // 0% 处的颜色
}, {
offset: 1,
// 颜色的结束位置
color: colorList[0][index] // 100% 处的颜色
}])
}
}
},
data: [10, 52, 200, 334, 390, 330, 220, 100, 20, 40]
}
]
})