<template>
  <view class="ec-wrap">
    <!-- 通过 props 把 option 喂给 renderjs -->
    <view
      class="ec-canvas"
      :prop="option"
      :change:prop="ec.setOption"
      :data-theme="theme"
    />
  </view>
</template>

<script>
export default {
  name: "EChartsView",
  props: {
    option: { type: Object, default: () => ({}) },
    theme: { type: String, default: "light" },
  },
};
</script>

<script module="ec" lang="renderjs">
import * as echarts from "echarts";

let chart = null;

function ensureChart(el) {
  if (chart) return chart;
  chart = echarts.init(el, null, { renderer: "canvas" });

  // 自适应：监听容器尺寸变化
  if (typeof ResizeObserver !== "undefined") {
    const ro = new ResizeObserver(() => {
      chart && chart.resize();
    });
    ro.observe(el);
  } else {
    // 兜底
    window.addEventListener("resize", () => chart && chart.resize());
  }
  return chart;
}

export default {
  mounted() {
    const el = this.$el.querySelector(".ec-canvas") || this.$el;
    ensureChart(el);
  },
  methods: {
    setOption(option) {
      const el = this.$el.querySelector(".ec-canvas") || this.$el;
      const c = ensureChart(el);
      if (!option) return;
      c.setOption(option, true);
      // 首次渲染后再 resize 一次，避免 H5 初始宽高为 0
      setTimeout(() => c.resize(), 16);
    },
  },
};
</script>

<style>
.ec-wrap {
  width: 100%;
  height: 100%;
}
.ec-canvas {
  width: 100%;
  height: 100%;
}
</style>
