mpvue-echarts
mpvue-echarts copied to clipboard
在uni-app中使用多个含有echarts的自定义组件时,无法通过setOption()正常更新数据
能够复现问题的小Demo:https://github.com/DirtyIndustry/echartsupdate 在www.dcloud.io下载HBuilderX(APP开发版),打开Demo工程文件夹,就可以在手机或者微信开发者工具里运行了。代码里的注释也说明了一下问题。
Demo工程中/components/myChart.vue是包含一个mpvue-echarts的组件,echarts实例声明在script中,用props传入canvasId和option,然后设置一个watch监视option变化,当option变化时用chart.setOption(newValue)将新数据显示出来。
/pages/index/index.vue是主页,里面加载了两个myChart组件,通过一个button改变两个myChart的option值。
这两个myChart可以正常初始化并显示正确的数据,但是如果改变option触发watch中的setOption()的话,只有第二个myChart组件会触发更新,并且两个option都显示在了第二个chart上,第一个chart完全不会更新。
如果watch中改用init()的话两个chart可以分别显示正确的数据。但这似乎不是正确或者官方的做法?
请问应该怎样修改这个组件才能正常使用setOption更新数据呢?
谢谢!
不太了解这个 uni-app
这个问题其实与uni-app关系不大,希望 @F-loat 能认真看下@DirtyIndustry的代码,感觉是对mpvue-echarts二次封装有些点没注意到,造成canvas或者chart对象复用了。
把 chart 实例挂在 this 上试试
我传了不同的canvasId,在echarts.vue源码里打log用的id是默认的id?为什么不是我传入的id?
是直接使用的的 mpvue-echarts 这个组件吗
是的话应该没问题的,而且两个 canvas 的 id 一样的话,第二个会直接不显示的
是用的@DirtyIndustry封装的mychart
<mpvue-echarts :echarts="echarts" :onInit="handleInit" canvasId="eeeee" ></mpvue-echarts>
这么写 canvasId = eeeee
<mpvue-echarts :echarts="echarts" :onInit="handleInit" :canvasId="canvasId" ></mpvue-echarts>
这么写,用属性里的canvasId,canvasId = ec-canvas,
props: { canvasId: { type: String, required: true }, option: { type: Object, default () { return {} }, required: true } },
我用的时候是传入了canvasId值的
<pui-charts :option="gaugeOption" :canvasId="chart01" />
刚接触vue,是不是有什么本质写法不对,属性不能通过属性传递?
mychart里也是直接用的mpvue-echarts
是的话应该没问题的,而且两个 canvas 的 id 一样的话,第二个会直接不显示的
页面有2个chat,我也传入了不同的canvasId,问题就是第二个chat出现在了第一个chat上,传入的canvasId值也没有生效
@pan-common 我这边没遇到这个问题,你可以试下 https://github.com/F-loat/mpvue-echarts/tree/master/examples
我遇到同样问题,已解决; 问题出在chart的定义是一个变量,多次使用会出现覆盖现象,可以将 let chart改成 let echartsArr= {},将handleInit方法改成如下:
handleInit(canvas, width, height) {
let chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
chart.setOption(this.opt, true);
echartsArr[this.canvasId] = chart;
return chart;
}
然后watch方法里相应修改为:
option: {
handler(newVal, oldVal) {
let chart = echartsArr[this.canvasId]
if (chart) {
if (newVal) {
chart.setOption(newVal, true)
}
}
}
}
}
你试一下是否可行,本人已测试成功
楼上的兄弟太厉害了,这个问题也是困扰了我好久,用你这个方法完美解决了 希望作者可以把这个问题在框架中解决一下
请问有完整的例子参考吗?