文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3怎么封装ECharts组件

2023-05-20 15:39

关注

一、前言

前端开发需要经常使用ECharts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装ECharts组件复用的方式可以减少代码量,增加开发效率。

二、封装ECharts组件

为什么要封装组件

封装的ECharts组件实现了以下的功能:

本文使用的是vue3 + typescript的写法。

代码实现:

ECharts组件:
<template>
  <div :id="id" :class="className" : />
</template>
<script setup lang="ts">
//按需导入需要用到的 vue函数 和 echarts
import { onMounted, onBeforeUnmount, defineProps, watch } from "vue";
import * as echarts from 'echarts';
//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
let myChart: echarts.ECharts;
const props = defineProps({
  id: {
    type: String,
    default: 'chart',
    required: true
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '300px',
  },
  loading: {
    type: Boolean,
    default: true,
  },
  fullOptions: {
    type: Object,
    default: () => ({}),
    required: true
  },
})
//重绘图表函数
const resizeHandler = () => {
  myChart.resize();
}
//设置防抖,保证无论拖动窗口大小,只执行一次获取浏览器宽高的方法
const debounce = (fun: { (): void; (): void; }, delay: number | undefined) => {
  let timer: number | undefined;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fun();
    }, delay);
  }
};
const cancalDebounce = debounce(resizeHandler, 50);
//页面成功渲染,开始绘制图表
onMounted(() => {
  //配置为 svg 形式,预防页面缩放而出现模糊问题;图表过于复杂时建议使用 Canvas
  myChart = echarts.init(document.getElementById(props.id) as HTMLDivElement, { renderer: 'svg' })
  myChart.showLoading({
    text: '',
    color: '#409eff',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, .95)',
    zlevel: 0,
    lineWidth: 2,
  });
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
  //自适应不同屏幕时改变图表尺寸
  window.addEventListener('resize', cancalDebounce);
})
//页面销毁前,销毁事件和实例
onBeforeUnmount(() => {
  window.removeEventListener('resize', cancalDebounce)
  myChart.dispose()
})
//监听图表数据时候变化,重新渲染图表
watch(() => [props.fullOptions.options, props.loading], () => {
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
}, { deep: true })
</script>
ECharts组件的用法:
<template>
  <Echarts
    id="echarts"
    height="300px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
// 引进Echarts 组件
import Echarts from '@/components/Echarts/Echarts.vue';
// 引进Echarts 的options配置文件,可根据项目模块来创建该配置文件
import chartOption from '@/components/Echarts/options';
 
const echartsOptions = reactive({
  options: { },
  init: false
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式,传进options中的两个参数data(图表的数据)和dimension(图表的维度),
onMounted(() => {
  const testData = [26,27,24,23];
  const testDimensions = ['家用电器','户外运动','汽车用品','手机数码'];
  echartsOptions.options = chartOption.testOption(testData, testDimensions);
});
</script>

效果:

vue3怎么封装ECharts组件

以上就是vue3怎么封装ECharts组件的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯