vue 封装的echarts组件,多个页面调用数据不渲染问题
程序员文章站
2024-01-25 20:19:22
...
vue 封装的echarts组件,多个页面调用数据不渲染问题,抛弃使用id ,改用ref
<div class="storEchprh" ref="echarts"></div>
//这是要渲染echarts 图的div,引入echarts,
//最重要的 (this.$refs.echarts)
var echarts = require('echarts')
this.myChart = echarts.init(this.$refs.echarts)
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: '#E5ECEC' // 修改网格线颜色
}
},
data: xdata
},
yAxis: {
type: 'value',
name: '盈亏金额(元)',
splitLine: {
show: false
}
},
series: [
{
name: '会员盈亏',
type: 'line',
color: '#4A71F2',
symbol: 'circle',
data: ydata.memberProfit
}
]
}
this.myChart.setOption(option, true)