<script setup name="BaseChart">
|
import * as echarts from "echarts";
|
import "./transparent";
|
import { onMounted, onBeforeUnmount, ref, nextTick } from "vue";
|
import eventBus from "@/utils/eventBus";
|
|
let chart_instance = null;
|
let exportChart_instance = null;
|
|
const chart = ref(null);
|
const exportChart = ref(null);
|
const emit = defineEmits(["click", "update:fullFlag"]);
|
|
const props = defineProps({
|
fullFlag: {
|
type: Boolean,
|
default: false,
|
}
|
});
|
|
const fullScreenFlag = ref(props.fullFlag);
|
|
|
function busHandler() {
|
setTimeout(() => {
|
resize();
|
// 因为过渡设置了0.5s,所以需要等待0.5s后再resize
|
}, 580);
|
}
|
|
|
onMounted(() => {
|
console.log('base mounted',chart.value, '=============');
|
|
// chart_instance.value = echarts.init(chart.value, "transparent");
|
chart_instance = echarts.init(chart.value, "transparent");
|
exportChart_instance = echarts.init(exportChart.value, "transparent");
|
|
nextTick(() => {
|
chart_instance.resize();
|
});
|
window.addEventListener("resize", resize);
|
|
eventBus.on("toggleSiteList", busHandler);
|
|
});
|
|
onBeforeUnmount(() => {
|
window.removeEventListener("resize", resize);
|
eventBus.off("toggleSiteList", busHandler);
|
dispose();
|
});
|
|
function getChart() {
|
return chart_instance;
|
}
|
|
function setOption(option) {
|
if (chart_instance) {
|
chart_instance.setOption(option);
|
}
|
}
|
|
function fullScreen() {
|
fullScreenFlag.value = !fullScreenFlag.value;
|
emit("update:fullFlag", fullScreenFlag.value);
|
nextTick(() => {
|
resize();
|
});
|
}
|
|
function getDataURL() {
|
let base64 = "";
|
if (exportChart_instance) {
|
let option = chart_instance.getOption();
|
option.xAxis[0].axisLine.lineStyle = {
|
color: "#000",
|
};
|
option.xAxis[0].axisLabel.textStyle = option.xAxis[0].axisLabel.textStyle || {};
|
option.xAxis[0].axisLabel.textStyle.color = "#000";
|
|
option.yAxis[0].axisLine.lineStyle = {
|
color: "#000",
|
};
|
option.yAxis[0].axisLabel.textStyle = option.yAxis[0].axisLabel.textStyle || {};
|
option.yAxis[0].axisLabel.textStyle.color = "#000";
|
|
option.animation = false;
|
|
exportChart_instance.setOption(option);
|
base64 = exportChart_instance.getDataURL({
|
pixelRatio: 1,
|
backgroundColor: "#fff",
|
});
|
}
|
return base64;
|
}
|
|
function resize() {
|
console.log('resize', chart_instance, '=============');
|
|
if (chart_instance) {
|
chart_instance.resize();
|
}
|
}
|
|
function dispose() {
|
disposeChart(chart_instance);
|
disposeChart(exportChart_instance);
|
}
|
|
function disposeChart(chart) {
|
if (chart) {
|
chart.dispose(); // 销毁实例
|
}
|
}
|
|
function handleClick() {
|
emit("click", true);
|
}
|
|
defineExpose({
|
getChart,
|
setOption,
|
getDataURL,
|
});
|
</script>
|
|
<template>
|
<div
|
class="e-chart-root"
|
:class="{ 'full-screen': fullScreenFlag }"
|
@click="handleClick"
|
@dblclick="fullScreen"
|
>
|
<div class="e-chart-container">
|
<div class="e-chart" ref="chart"></div>
|
<slot name="tools"></slot>
|
</div>
|
<div class="export-chart-wrapper">
|
<div class="export-chart" ref="exportChart"></div>
|
</div>
|
</div>
|
</template>
|
|
|
<style scoped>
|
.e-chart-root {
|
position: relative;
|
}
|
/* chart wrapper css */
|
.e-chart-root,
|
.e-chart {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
.e-chart-container {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
box-sizing: border-box;
|
}
|
.e-chart-root.full-screen .e-chart-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-size: 100% 100%;
|
z-index: 9999;
|
}
|
|
/* export chart wrapper css */
|
.export-chart-wrapper {
|
position: relative;
|
width: 0;
|
height: 0;
|
overflow: hidden;
|
}
|
.export-chart {
|
position: absolute;
|
width: 600px;
|
height: 400px;
|
}
|
</style>
|
