在uni-app中使用多个含有echarts的自定义组件时，无法通过setOption()正常更新数据

DirtyIndustry commented 6 years ago

能够复现问题的小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更新数据呢？

谢谢！

F-loat commented 6 years ago

不太了解这个 uni-app

pan-common commented 5 years ago

这个问题其实与uni-app关系不大，希望 @F-loat 能认真看下@DirtyIndustry的代码，感觉是对mpvue-echarts二次封装有些点没注意到，造成canvas或者chart对象复用了。

F-loat commented 5 years ago

把 chart 实例挂在 this 上试试

pan-common commented 5 years ago

我传了不同的canvasId，在echarts.vue源码里打log用的id是默认的id？为什么不是我传入的id？

F-loat commented 5 years ago

是直接使用的的 mpvue-echarts 这个组件吗

F-loat commented 5 years ago

是的话应该没问题的，而且两个 canvas 的 id 一样的话，第二个会直接不显示的

pan-common commented 5 years ago

是用的@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，是不是有什么本质写法不对，属性不能通过属性传递？

pan-common commented 5 years ago

mychart里也是直接用的mpvue-echarts

pan-common commented 5 years ago

是的话应该没问题的，而且两个 canvas 的 id 一样的话，第二个会直接不显示的

页面有2个chat，我也传入了不同的canvasId，问题就是第二个chat出现在了第一个chat上，传入的canvasId值也没有生效

F-loat commented 5 years ago

@pan-common 我这边没遇到这个问题，你可以试下 https://github.com/F-loat/mpvue-echarts/tree/master/examples

my-sunny commented 5 years ago

我遇到同样问题，已解决；问题出在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)
        }
      }
    }
  }
}

你试一下是否可行，本人已测试成功

liyuan900226 commented 5 years ago

楼上的兄弟太厉害了，这个问题也是困扰了我好久，用你这个方法完美解决了希望作者可以把这个问题在框架中解决一下

code-huisoido commented 5 years ago

请问有完整的例子参考吗？

F-loat / mpvue-echarts

在uni-app中使用多个含有echarts的自定义组件时，无法通过setOption()正常更新数据 #31