在使用v-charts时,官网给出的例子改变线的颜色之后不知道怎么配置渐变,ok直接代码
<template>
<ve-line :data="chartData" :colors="colors" :settings="chartSettings"></ve-line>
</template>
<script>
export default {
data () {
this.colors = [new echarts.graphic.LinearGradient(
0,0,0,1,[{
offset: 0, color: 'rgba(65,95,255,1)'
},{
offset: 1, color: 'rgba(65,95,255,0)'
}]),
new echarts.graphic.LinearGradient(
0,0,0,1,[{
offset: 0, color: 'rgba(234,79,63,1)'
},{
offset: 1, color: 'rgba(234,79,63, 0)'
}]),
new echarts.graphic.LinearGradient(
0,0,0,1,[{
offset: 0, color: 'rgba(49,209,136,1)'
},{
offset: 1, color: 'rgba(49,209,136,0)'
}]),
new echarts.graphic.LinearGradient(
0,0,0,1,[{
offset: 0, color: 'rgba(255,149,54,1)'
},{
offset: 1, color: 'rgba(255,149,54,0)'
}]),
new echarts.graphic.LinearGradient(
0,0,0,1,[{
offset: 0, color: 'rgba(176,214,221,1)'
},{
offset: 1, color: 'rgba(176,214,221,0)'
}]),
new echarts.graphic.LinearGradient(
0,0,0,1,[{
offset: 0, color: 'rgba(248,231,28,1)'
},{
offset: 1, color: 'rgba(248,231,28,0)'
}]
)],
this.chartSettings = {
stack: { '用户': ['访问用户', '下单用户'] },
area: true,
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>