在vue中引入echart的折线图时,echarts.graphic.LinearGradient,不能正常显示的解决方法。
在vue中需要达到折线图,且有区域渐变色的效果,那么像下面那样子直接复制过来,在vue中不能渲染出来。需要将原来的 newecharts.graphic.LinearGradient 改成这样,new this.$echarts.graphic.LinearGradient前提先是npm安装echart1、使用npm安装npm install echarts --save2、main.js中引入挂
·
在vue中需要达到折线图,且有区域渐变色的效果,那么像下面那样子直接复制过来,在vue中不能渲染出来。需要将原来的 new echarts.graphic.LinearGradient 改成这样,new this.$echarts.graphic.LinearGradient
前提先是npm安装echart
1、使用npm安装
npm install echarts --save
2、main.js中引入挂载原型
import echarts from 'echarts'
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts
<-- 3、记得要设置宽高-->
<div id="bottomRight" :style="{width: '580px', height: '500px'}">折线示意图</div>
methods: {
// 初始化echarts
ageInit () {
// 因为初始化echarts 的时候,需要指定的容器 id='bottomRight'
// 基于刚刚准备好的 DOM 容器,初始化 EChart 实例
const myChart1 = this.$echarts.init(document.getElementById('bottomRight'))
const color = ['#6080EB', 'rgba(96, 128, 235, 0.42)', 'rgba(96, 128, 235, 0.03)']
const xData = ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07']
const yData = [1220, 182, 491, 234, 790, 330, 310]
// 绘制图表
myChart1.setOption({
color: color[0],
dataZoom: {
type: 'inside',
xAxisIndex: [0]
},
tooltip: {
show: true,
trigger: 'axis'
},
grid: {
top: 10,
bottom: 40
// left: 70,
// right: 20,
},
xAxis: {
boundaryGap: false,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#d8d8d8'
}
},
axisLabel: {
color: 'rgba(0, 0, 0, 0.65)'
},
data: xData
},
yAxis: {
splitNumber: 4,
splitLine: {
show: true
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#d8d8d8'
}
},
axisLabel: {
color: 'rgba(0, 0, 0, 0.65)'
}
},
series: [
{
type: 'line',
showSymbol: false,
smooth: true,
lineStyle: {
color: color[0],
width: 3
},
areaStyle: {
// 区域填充样式
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[1]
},
{
offset: 1,
color: color[2]
}
],
false
)
}
},
data: yData
}
]
})
}
mounted () {
this.ageInit()
},
效果图
更多推荐
已为社区贡献5条内容
所有评论(0)