<template>
<div ref="echartRef" :style="`height: ${height};width: ${width};`" autoresize>
</div>
</template>
<script setup lang="ts" name="md-chart">
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {chartColor} from "/@/assets/js";
const props = defineProps({
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
option: {
type: Object,
default: null,
},
})
//定义dom
const echartRef = ref();
//定义实例
let myChart
//接受传递值
let emitDate={
color:chartColor().colorList,
}
//打开echarts
const open = (emit) => {
Object.assign(emitDate,emit)
initChart()
}
//配置echarts
const setOptions = ()=>{
if(props.option){
myChart.setOption(props.option);
}else{
myChart.setOption(emitDate);
}
// 根据页面大小自动响应图表大小
window.addEventListener("resize", ()=> {
myChart.resize();
});
}
// 画布自适应
const resizeChart = () => {
//浏览器界面改变大小echart自适应
myChart ? myChart.resize() : ''
}
// 初始化
const initChart = () => {
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();//销毁
}
myChart = echarts.init(echartRef.value);
setOptions()
}
onUnmounted(() => {
window.removeEventListener('resize', resizeChart)
});
onMounted(()=>{
initChart()
})
// 暴露变量
defineExpose({
open
});
</script>
封装chart(vue3)
最新推荐文章于 2024-08-14 15:45:18 发布