登录注册/数据分析

uni_modules/charts/EChartsView.vue

@@ -0,0 +1,72 @@
+<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>