echarts柱状图颜色渐变
series: [
{
type: 'bar',
barWidth: 10,
stack: 'total',
data: this.seriesData,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#4d76ff'
}, {
offset: 1,
color: '#80aaff'
}]),
}
},
}
],
v-chart柱状图颜色渐变
{
name: '当月耗电量',
type: 'bar',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00e3fa',
},
{
offset: 1,
color: 'rgba(13,44,58,0.50)',
},
],
},
},
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
chargeBoxOption: {
color: ['#5470C6', '#EE6666'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: {
data: ['累计耗电量', '当月耗电量'],
textStyle: {
color: '#fff',
},
bottom: '10px',
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}
],
yAxis: [
{
type: 'value',
name: '累计耗电量',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
},
// axisLabel: {
// formatter: '{value} ml'
// }
},
{
type: 'value',
name: '当月耗电量',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
},
// axisLabel: {
// formatter: '{value} °C'
// }
}
],
series: [
{
name: '累计耗电量',
type: 'line',
yAxisIndex: 0,
itemStyle: {
color: '#FF6A29'
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '当月耗电量',
type: 'bar',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00e3fa',
},
{
offset: 1,
color: 'rgba(13,44,58,0.50)',
},
],
},
},
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}
