VUE 中实现雨量图，显示不同颜色效果
作者：互联网
<div style="height:65%;" id="fxps_ssyl"></div>
ssylchartInit() {
var that = this;
var dataAxis = ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'];
var data = [15, 20, 16, 12, 10, 6, 5];
let ssylEchart = this.$echarts.init(document.getElementById("fxps_ssyl"));
var creatColor = function (params) {
var color1 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#fdd500'
}, {
offset: 0,
color: '#C07100'
}]);
var color2 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#528c13'
}, {
offset: 0,
color: '#97f413'
}]);
var color3 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#528c13'
}, {
offset: 0,
color: '#9ff5bc'
}]);
var color4 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#00c4fd'
}, {
offset: 0,
color: '#0274a7'
}]);
var color5 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#01e9f8'
}, {
offset: 0,
color: '#016267'
}]);
var color6 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#01e9f8'
}, {
offset: 0,
color: '#016267'
}]);
var color7 = new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#01e9f8'
}, {
offset: 0,
color: '#016267'
}]);
//首先定义一个数组
var colorList = [
color1, color2, color3, color4, color5, color6, color7
];
return colorList[params.dataIndex]
}
var option = {
grid: {
top: '4%',
left: '3%',
right: '4%',
bottom: '1%',
containLabel: true
},
tooltip: {},
legend: { data: ['暴雨', '大雨', '中雨', '小雨'] },
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: '#50a2c1',
fontSize: 13
},
},
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#50a2c1'
}
}
},
series: [
{
// name: '暴雨',
type: 'bar',
barWidth: 12, //柱图宽度
itemStyle: {
normal: {
label: {
// show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#50a2c1',
fontSize: 15
}
},
color: creatColor
}
},
data: data
},
// {
// name: '大雨',
// type: 'bar',
// barWidth: 12, //柱图宽度
// itemStyle: {
// normal: {
// label: {
// textStyle: { //数值样式
// color: '#50a2c1',
// fontSize: 15
// }
// },
// color: creatColor
// }
// },
// data: [0, 20]
// }
] }; ssylEchart.setOption(option); },
] }; ssylEchart.setOption(option); },
标签：00,VUE,颜色,color,雨量,offset,var,echarts,LinearGradient 来源： https://www.cnblogs.com/cartoon/p/12095078.html