vue3+TS+vite中Echarts的安装与使用

概述

技术栈：Vue3+Ts+Vite+Echarts

简述：图文详解，教你如何在Vue项目中引入Echarts，封装Echarts组件，并实现常用Echats图列

---

文章目录

一，效果图

二，引入Echarts

        2.1安装Echarts

        2.2main.ts中引入

        2.3Echarts组件封装

三，使用

        3.1柱形图(为例)

---

文章正文

一效果图

静态效果

动态效果

    2.1安装Echarts

2.1.1 npm

npm i echarts --save

2.2.2 pnpm

pnpm i echarts -s

2.2main.ts中引入

//引入echarts
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts;

2.3Echarts组件封装

在/src/components/echartsComp.vue文件中写入以下代码

<template><div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
</template><script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';// 定义props泛型
interface Props {width?: string;height?: string;option: EChartsOption;
}
const props = withDefaults(defineProps<Props>(), {width: '100%',height: '100%',option: () => ({})
});const myChartsRef = ref<HTMLDivElement>();
let myChart: ECharts;
// eslint-disable-next-line no-undef
let timer: string | number | NodeJS.Timeout | undefined;// 初始化echarts
const initChart = (): void => {if (myChart !== undefined) {myChart.dispose();}myChart = init(myChartsRef.value as HTMLDivElement);// 拿到option配置项，渲染echartsmyChart?.setOption(props.option, true);
};// 重新渲染echarts
const resizeChart = (): void => {timer = setTimeout(() => {if (myChart) {myChart.resize();}}, 50);
};
// 挂载
onMounted(() => {initChart();window.addEventListener('resize', resizeChart);
});
// 挂载前
onBeforeUnmount(() => {window.removeEventListener('resize', resizeChart);clearTimeout(timer);timer = 0;
});// 监听器
watch(props.option,() => {initChart();},{deep: true}
);
</script>

三，使用（以柱状图为例）

效果图

1，在需要的组件中引入该封装的组件

2，在需要的位置引入该组件

<template><div class="common-layout"><el-main><div :style="{ width: '100%', height: '100%' }"><Echarts :option="option" /></div></el-main></div>
</template><script setup lang="ts">
//引入ref实现响应式数据
import { reactive ,ref} from 'vue';
// 引入封装好的组件
import Echarts from '../components/echartsComp.vue';const option =  reactive({backgroundColor: '#fff',title:{text:'数据统计',align: 'center',},grid: {containLabel: true,bottom: '5%',top: '20%',left: '5%',right: '5%',},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},},legend: {top: '10%',right: '40%',data: ['订单', '销售额'],itemWidth: 18,itemHeight: 18,itemGap: 30,textStyle: {fontSize: 10,color: 'black',padding: [0, 0, 0, 10],},},xAxis: {// name: "班级",triggerEvent: true,data: ['2023/05/17', '2023/05/18', '2023/03/19', '2023/05/19', '2023/05/20', '2023/05/21', '2023/05/22'],axisLabel: {show: true,fontSize: 14,color: '#C9D2FA',rotate: 10, // 设置旋转角度为30度align: 'right', verticalAlign: 'top',},axisLine: {show: false,lineStyle: {show: false,color: '#F3F3F3',width: 2,},},axisTick: {show: false,},},yAxis: [{// name: '单位:万',// type: 'value',// nameTextStyle: {//   color: '#444444',// },axisLabel: {interval: 0,show: true,fontSize: 18,color: '#C9D2FA',},axisLine: {show: false,// lineStyle: {//   color: "#F3F3F3",//   width: 2// }},axisTick: {show: false,},splitLine: {lineStyle: {type: 'dashed',color: '#3E4A82',},},},],series: [{name: '订单',type: 'bar',align: 'center',silent: true,itemStyle: {normal: {color: '#2F8FFF',},},label: {show: true,color: '#2F8FFF',fontSize: 14,position: 'top', // 显示位置，可选值有 'top', 'bottom', 'inside', 'outside'formatter: '{c}', // 标签内容格式器，这里表示显示数据值},data: [120, 75, 90, 102, 130, 75, 99],},{name: '销售额',type: 'bar',silent: true,itemStyle: {normal: {color: '#47B558',},},label: {show: true,color: '#47B558',fontSize: 14,position: 'top', // 显示位置，可选值有 'top', 'bottom', 'inside', 'outside'formatter: '{c}', // 标签内容格式器，这里表示显示数据值},data: [102, 130, 75, 99, 120, 75, 90],},],})
</script>