美文网首页
Echarts地图注意事项

Echarts地图注意事项

作者: 清苑折纸 | 来源:发表于2021-07-21 15:26 被阅读0次

Echarts使用时当数据发生变化页面不会重新渲染,需要对变化的数据设置监听,当数据变化后直接
先清空echarts中的所有的组件以及图表,然后再重新将我们刚开始实例化的代码加进去

this.chart = echarts.init(this.$refs.main, 'dark')
//下面是对sidebar进行监听
watch: {
    '$store.state.app.sidebar' (val, old) {
      this.chart.resize()
    }
  }

setOption的第二个参数(notmerge)

设置为true的话,就是notMerge,不合并,false的话,就Merge,之前的东西还保留

当修改setOption值的时候,我们异步回来的数据层级比较深的情况下,需要echarts重绘,否则不会如愿显示。主要体现,你增加数据可以,但是减少数据,发现视图上还是保持着最多数据的展示效果

watch: {
    homeEchartsOption: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          setTimeout(() => {
            this.chart.setOption(newVal, true)
          }, 300)
        } else {
          // this.chart.setOption(oldVal, true)
        }
        this.chart.resize()
      }
    }
  },

在echarts中要将所有设置指定在geo上时只需在series内设置geoIndex: 0

执行echarts时出现 there is a chart instance already initialized on the dom

原因,多次使用echarts.init(document.getElementById(this.options.zid));
解决方案:设为全局

相关文章

网友评论

      本文标题:Echarts地图注意事项

      本文链接:https://www.haomeiwen.com/subject/rqzwyltx.html