折线图区域渐变,图例legend不渐变
let myChart = this.$echarts.init(this.$refs.linebox);
myChart.setOption({
tooltip: {
backgroundColor: "rgba(4, 21, 48, 0.75)",
trigger: "axis",
axisPointer: {
type: "none",
},
textStyle: {
color: '#ffffff',
fontSize: 9
},
},
color: ['#9DFDFF', '#FFE081', '#AE9BFF'],
legend: {
icon: "circle",
itemWidth: 10,
itemGap: 60,
textStyle: {
color: "rgba(255, 255, 255, 0.7)",
},
// itemStyle:{
// color:'#ffcc00'
// },
data: [{
name: '供应商名称1',
itemStyle: {
color: '#9DFDFF'
}
}, {
name: '供应商名称2',
itemStyle: {
color: '#FFE081'
}
}, {
name: '供应商名称3',
itemStyle: {
color: '#AE9BFF'
}
}]
},
grid: {
left: "2%",
right: "2%",
bottom: "0",
top: "18%",
containLabel: true,
},
xAxis: {
axisLabel: {
color: "#ffffff",
},
axisLine: {
lineStyle: {
color: "#A6E0F7",
opacity: 1,
},
},
axisTick: {
lineStyle: {
color: "#A6E0F7",
opacity: 0,
},
},
type: "category",
data: ['9-11', '9-12', '9-13'],
},
yAxis: {
type: "value",
name: "单位:单",
nameLocation: "end",
splitLine: {
lineStyle: {
color: "#6076AD", //横轴的线线颜色
opacity: 0.15,
},
},
axisLine: {
lineStyle: {
color: "#ffffff", //y轴的值颜色
opacity: 0.5,
},
},
axisTick: {
lineStyle: {
color: "#ffffff",
opacity: 0,
},
},
axisLabel: {
color: "#ffffff",
},
},
series: [{
symbol: "none",
itemStyle: {
normal: {
lineStyle: {
color: '#00F4FA'
},
color: "#ffcc00",
borderRadius: 200,
// 添加渐变颜色
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(24, 255, 242, 0.28)",
},
{
offset: 1,
color: "rgba(18, 192, 188, 0)",
},
]),
}, 改变折线点的颜色
lineStyle: {
color: "#00F4FA",
width: 1,
}, //改变折线颜色
},
name: "供应商名称1",
data: [220, 182, 191],
type: "line",
areaStyle: {},
smooth: true,
color: "#9DFDFF"
},
{
symbol: "none",
itemStyle: {
normal: {
lineStyle: {
color: '#FFE081'
},
color: "#ffcc00",
borderRadius: 200,
// 添加渐变颜色
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(255, 230, 128, 0.28)",
},
{
offset: 1,
color: "rgba(255, 244, 73, 0)",
},
]),
}, 改变折线点的颜色
lineStyle: {
color: "#00F4FA",
width: 1,
}, //改变折线颜色
},
name: "供应商名称2",
data: [200, 240, 375],
type: "line",
areaStyle: {},
smooth: true,
},
{
symbol: "none",
itemStyle: {
normal: {
lineStyle: {
color: '#AE9BFF'
},
color: "#ffcc00",
borderRadius: 200,
// 添加渐变颜色
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(127, 24, 255, 0.28)",
},
{
offset: 1,
color: "rgba(172, 117, 255, 0)",
},
]),
}, 改变折线点的颜色
lineStyle: {
color: "#00F4FA",
width: 1,
}, //改变折线颜色
},
name: "供应商名称3",
data: [152, 500, 122],
type: "line",
areaStyle: {},
smooth: true,
},
]
})