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控件

待补充

相关推荐
华仔啊6 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel6 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴6 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
前端大卫6 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin7 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学8 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
铅笔侠_小龙虾10 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
sniper_fandc12 小时前
Axios快速上手
vue.js·axios
哟哟耶耶12 小时前
Starting again-02
开发语言·前端·javascript
Kitasan Burakku12 小时前
Typescript return type
前端·javascript·typescript