<template>
<div :style="'height:' + height" ref="echartRef"></div>
</template>
<script lang="ts">
import { reactive, toRefs, getCurrentInstance, onMounted, computed, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import _ from 'lodash';
import { useStore } from '/@/store/index';
export default {
name: 'echarts',
props: {
height: {
type: String,
default: '400px',
},
ecoptions: {
type: Object,
default: {},
required: true,
},
},
emits: ['echartSelected'],
setup(props, { emit }) {
const { proxy } = getCurrentInstance() as any;
const store = useStore();
let echart: any = {};
const state = reactive({
options: {},
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
watch(
() => getThemeConfig.value.isIsDark,
(newOption) => {
echart.dispose();
echart = echarts.init(proxy.$refs.echartRef, newOption ? 'dark' : '');
echart.setOption(props.ecoptions, true);
console.log('监听主题风格', echart, newOption, props.ecoptions);
},
{ deep: true }
);
watch(
() => props.ecoptions,
(newOption) => {
echart.setOption(props.ecoptions, true);
console.log('监听折线图', newOption, props.ecoptions);
},
{ deep: true }
);
onMounted(() => {
console.log('主题配置', props.ecoptions.themeConfig, getThemeConfig.value.isIsDark);
echart = echarts.init(proxy.$refs.echartRef, getThemeConfig.value.isIsDark ? 'dark' : '');
console.log('echart', echart, props.ecoptions);
echart.setOption(props.ecoptions, true);
/* echart.on('click',params=>{
emit("echartClick", params);
}); */
echart.getZr().on('click', (params) => {
let pointInPixel = [params.offsetX, params.offsetY];
if (echart.containPixel('grid', pointInPixel)) {
let pointInGrid = echart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
console.log(pointInGrid);
emit('echartSelected', pointInGrid);
}
});
window.addEventListener('resize', chartResize);
});
const chartResize = () => {
console.log('窗口变化');
echart.resize(true);
};
return {
getThemeConfig,
...toRefs(state),
};
},
};
</script>
vue3中echarts封装
于 2024-02-20 10:28:04 首次发布