vite+vue3+antdesignvue+echarts记录

持续记录

用途：整理自己的一坨代码，从而提升写代码的思路与能力

开始时间：24-04-17

1，echarts图的响应式实现

（1）template部分：给echarts图提供渲染的容器

  <div class="chart-body" ref="chartContainer"></div>

（2）script部分：功能的实现

import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref<HTMLDivElement | null>(null)
let myChart: echarts.ECharts | null = null
var option: echarts.EChartsOption

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}
// 初始化
const initChart = () => {
  if (chartContainer.value) {
    myChart = echarts.init(chartContainer.value)
    myChart.setOption(option)
  }
}
// 窗口大小变化响应函数
const handleResize = () => {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})
// 销毁
onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

（3）css部分 ：（我的盒子大小是确定的）

.chart-body{
    width:480px;
    height:560px;

}

在 Vue 3 组件的生命周期中，将事件监听放在 onMounted 钩子中是一种最佳实践；

onMounted 钩子在组件的模板被渲染成真实 DOM 后触发。这意味着在 onMounted 中添加事件监听器可以确保所有的 DOM 元素都已经被正确渲染和初始化，特别是当你需要引用这些 DOM 元素，例如初始化 ECharts 图表时；

在 onMounted 中添加的事件监听器应该在组件销毁时被移除，这通常在 onUnmounted 生命周期钩子中进行。这样的设置创建了一个清晰的生命周期管理模式，即在组件完全可用时设置资源，在组件即将销毁时清理资源，从而有效防止内存泄漏；

2，两栏布局＋tree控件

待补充