mpvue-echarts
mpvue-echarts copied to clipboard
F-loat
在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关系不大，希望 @F-loat 能认真看下@DirtyIndustry的代码，感觉是对mpvue-echarts二次封装有些点没注意到，造成canvas或者chart对象复用了。
我传了不同的canvasId，在echarts.vue源码里打log用的id是默认的id？为什么不是我传入的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，是不是有什么本质写法不对，属性不能通过属性传递？
是的话应该没问题的，而且两个 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)
}
}
}
}
}
你试一下是否可行，本人已测试成功
