|
|
@@ -1,111 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="hc-echarts-box">
|
|
|
- <div ref="echart" class="hc-echarts" :style="`width : ${chart?.clientWidth}px`" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import * as echarts from 'echarts'
|
|
|
-import { getObjValue } from 'js-fast-way'
|
|
|
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
-const props = defineProps({
|
|
|
- option: {
|
|
|
- type: Object,
|
|
|
- default: () => ({}),
|
|
|
- },
|
|
|
-})
|
|
|
-
|
|
|
-//事件
|
|
|
-const emit = defineEmits(['resize'])
|
|
|
-
|
|
|
-defineOptions({
|
|
|
- name: 'HcCharts',
|
|
|
-})
|
|
|
-
|
|
|
-//初始变量
|
|
|
-let chart = null, iTime
|
|
|
-const echart = ref(null)
|
|
|
-
|
|
|
-//深度监听
|
|
|
-const options = ref(getObjValue(props.option))
|
|
|
-watch(() => props.option, (option) => {
|
|
|
- options.value = getObjValue(option)
|
|
|
- setOptions(options.value)
|
|
|
-}, { deep: true })
|
|
|
-
|
|
|
-//初始化图表
|
|
|
-const initChart = () => {
|
|
|
- chart = echarts.init(echart.value)
|
|
|
- setOptions(options.value)
|
|
|
-}
|
|
|
-
|
|
|
-//监听浏览器窗口变化
|
|
|
-const windowResize = () => {
|
|
|
- window.addEventListener('resize', resizeEvent)
|
|
|
- nextTick(() => {
|
|
|
- emit('resize', chart.getWidth())
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const resizeEvent = () => {
|
|
|
- window.requestAnimationFrame(() => {
|
|
|
- chart.resize()
|
|
|
- clearTimeout(iTime)
|
|
|
- iTime = setTimeout(() => {
|
|
|
- emit('resize', chart.getWidth())
|
|
|
- }, 500)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-//设置图表
|
|
|
-const setOptions = (option) => {
|
|
|
- if (!chart) return
|
|
|
- nextTick(() => {
|
|
|
- chart.setOption(option)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-//渲染完成
|
|
|
-onMounted(() => {
|
|
|
- setTimeout(() => {
|
|
|
- initChart()
|
|
|
- windowResize()
|
|
|
- }, 500)
|
|
|
-})
|
|
|
-
|
|
|
-//被卸载
|
|
|
-onUnmounted(() => {
|
|
|
- window.removeEventListener('resize', resizeEvent)
|
|
|
- chart.dispose()
|
|
|
- chart = null
|
|
|
-})
|
|
|
-
|
|
|
-const onResize = () => {
|
|
|
- nextTick(() => {
|
|
|
- chart.resize()
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 暴露出去
|
|
|
-defineExpose({
|
|
|
- onResize,
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.hc-echarts-box {
|
|
|
- display: block;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .hc-echarts {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 2;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
