vite+vue3+antdesignvue+echarts记录

持续记录

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

开始时间:24-04-17


1,echarts图的响应式实现

(1)template部分:给echarts图提供渲染的容器

html 复制代码
  <div class="chart-body" ref="chartContainer"></div>

(2)script部分:功能的实现

javascript 复制代码
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部分 :(我的盒子大小是确定的)

css 复制代码
.chart-body{
    width:480px;
    height:560px;

}

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

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

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

2,两栏布局+tree控件

待补充

相关推荐
BillKu15 小时前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
bestadc15 小时前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode
萌萌哒草头将军16 小时前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛16 小时前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
奇怪的前端716 小时前
Alien-Signals 响应式系统
前端·vue.js
DLF_ou16 小时前
vue3+openlayers项目初始化
vue.js
太空游走的鱼16 小时前
Vue3 + Vite + Element Plus web转为 Electron 应用,解决无法登录、隐藏自定义导航栏
javascript·electron·vue3·管理系统·element plsu
华仔啊16 小时前
Vue 的 DOM 更新竟然是异步的?90%的人没有搞懂 nextTick
前端·vue.js
GISer_Jing16 小时前
Next系统学习(二)
前端·javascript·node.js
织_网17 小时前
Electron 核心模块速查表
javascript·electron·策略模式