73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<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>
|