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;

}

2，两栏布局＋tree控件

待补充