javascript - vue-echarts-v3使用的过程中折线图区域呈渐变色。
本文介绍了javascript - vue-echarts-v3使用的过程中折线图区域呈渐变色。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这是我的图表数据
我希望红色部分是渐变色。
我已经使用了visvisualMap的方法,并不能达到我想要的效果。
当我使用new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])。。。我找到的其中一种方法,。。但是不知道怎么获取echarts对象,
由于不想在项目中引入过多的资源,所以引入zRender暂时不在考虑范围之内。。。
求助
希望解决vue-echarts-v3插件使用是,获取new echarts.graphic.LinearGradient()的办法
<IEcharts :option="bar" class="step_echarts"></IEcharts
import IEcharts from 'vue-echarts-v3'
import 'echarts/lib/chart/line'
export defalut{
data(){
return{
bar: {
tooltip: {},
xAxis: {
data: ['1泡', '2泡', '3泡', '4泡', '5泡'],
axisTick:{
alignWithLabel:true
}
},
yAxis: {
show:false
},
series: [{
name: 'Clouds',
type: 'line',
data: [5, 7, 13, 20, 30],
areaStyle: {normal:{}}
}]
}
}
}
}
}
解决方案
我随便写了三个颜色。
series: [{
name: 'Clouds',
type: 'line',
data: [5, 7, 13, 20, 30],
areaStyle: {normal:{}},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'red'},
{offset: 0.5, color: 'pink'},
{offset: 1, color: '#ddd'}
]
)
}
}
}]
这篇关于javascript - vue-echarts-v3使用的过程中折线图区域呈渐变色。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文