chart接入后台数据后vue不响应式显示图片

标签：this   val   pre   exp   mouse   htm   显示   config   计算   

chart接入后台数据后vue不响应式显示图片

watch: {
  //观察option的变化
  config: {
    handler(newVal, oldVal) {
      if (this.chart) {
        if (newVal) {
          this.chart.setOption(newVal);
        } else {
          this.chart.setOption(oldVal);
        }
      } else {
        this.init();

      }
    },
    deep: true //对象内部属性的监听，关键。
  }
  },

完整的charts文件内容，我是自己写的公用组件，

• Charts.vue

<template>
  <div class="pr chart">
    <div ref="chart" class="chart-body"></div>
    <slot></slot>
  </div>
</template>

<script scoped>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({})
    },

    onClick: {
      type: Function,
      default: () => {}
    },
    onDispatchAction: {
      type: Object,
      default: () => ({})
    },
     onMouseover: {
      type: Function,
      default: () => {}
    }
  },
  watch: {
    //观察option的变化
    config: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
          this.init();

        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },
  mounted() {
    if (!this.$echarts) {
      return;
    }
    //初始化echarts
    let echartsWarp = this.$refs["chart"];
    let chart = (this.chart = this.$echarts.init(echartsWarp));
    chart.setOption(this.config);

    //点击旋转扇形，切该扇形高亮，我用的是每次点击重新渲染图，
    //这样可以每次计算扇形起点，达到旋转的视觉效果
    chart.on("click", params => {
      this.onClick(params);
      chart.setOption(this.config);
    });
    //高亮设置
    chart.dispatchAction(this.onDispatchAction)
    // //初始化设置高亮
    chart.dispatchAction({
      type: ‘highlight‘,
      seriesIndex: 0,
      dataIndex: 0
    })
    //取消鼠标进入自动高亮效果
    chart.on("mouseover", params => {
      this.onMouseover(params);
    });
    //屏幕大小改变时，图形大小自适应
    window.addEventListener("resize", () => {
      chart.resize();
    });
  },
};
</script>
<style scoped>
.chart {
  height: 3.7rem;
  width: 3.7rem;
  margin: 0 auto;
}
.chart-body {
  width: 100%;
  height: 100%;
}
</style>

chart接入后台数据后vue不响应式显示图片

标签：this   val   pre   exp   mouse   htm   显示   config   计算   

原文地址：https://www.cnblogs.com/sinceForever/p/12146192.html