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

1. npm i echarts --save

复制代码

2.2.2 pnpm

1. pnpm i echarts -s

复制代码

2.2main.ts中引入

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

复制代码

2.3Echarts组件封装

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

2. <template>
3.         <div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
4. </template>
6. <script setup lang="ts">
7. import { ECharts, EChartsOption, init } from 'echarts';
8. import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
10. // 定义props泛型
11. interface Props {
12.         width?: string;
13.         height?: string;
14.         option: EChartsOption;
15. }
16. const props = withDefaults(defineProps<Props>(), {
17.         width: '100%',
18.         height: '100%',
19.         option: () => ({})
20. });
22. const myChartsRef = ref<HTMLDivElement>();
23. let myChart: ECharts;
24. // eslint-disable-next-line no-undef
25. let timer: string | number | NodeJS.Timeout | undefined;
27. // 初始化echarts
28. const initChart = (): void => {
29.         if (myChart !== undefined) {
30.                 myChart.dispose();
31.         }
32.         myChart = init(myChartsRef.value as HTMLDivElement);
33.         // 拿到option配置项，渲染echarts
34.         myChart?.setOption(props.option, true);
35. };
37. // 重新渲染echarts
38. const resizeChart = (): void => {
39.         timer = setTimeout(() => {
40.                 if (myChart) {
41.                         myChart.resize();
42.                 }
43.         }, 50);
44. };
45. // 挂载
46. onMounted(() => {
47.         initChart();
48.         window.addEventListener('resize', resizeChart);
49. });
50. // 挂载前
51. onBeforeUnmount(() => {
52.         window.removeEventListener('resize', resizeChart);
53.         clearTimeout(timer);
54.         timer = 0;
55. });
57. // 监听器
58. watch(
59.         props.option,
60.         () => {
61.                 initChart();
62.         },
63.         {
64.                 deep: true
65.         }
66. );
67. </script>

复制代码

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

效果图

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

1. <template>
2.   <div class="common-layout">
3.         <el-main>
4.           <div :style="{ width: '100%', height: '100%' }">
5.                 <Echarts :option="option" />
6.         </div>
7.         </el-main>
8.   </div>
9. </template>
11. <script setup lang="ts">
12. //引入ref实现响应式数据
13. import { reactive ,ref} from 'vue';
14. // 引入封装好的组件
15. import Echarts from '../components/echartsComp.vue';
19. const option =  reactive(
20.   {
21.    backgroundColor: '#fff',
22.    title:{
23.     text:'数据统计',
24.     align: 'center',
25.    },
26.           grid: {
27.             containLabel: true,
28.             bottom: '5%',
29.             top: '20%',
30.             left: '5%',
31.             right: '5%',
32.           },
33.           tooltip: {
34.             trigger: 'axis',
35.             axisPointer: {
36.               type: 'shadow',
37.             },
38.           },
39.           legend: {
40.             top: '10%',
41.             right: '40%',
42.             data: ['订单', '销售额'],
43.             itemWidth: 18,
44.             itemHeight: 18,
45.             itemGap: 30,
46.             textStyle: {
47.               fontSize: 10,
48.               color: 'black',
49.               padding: [0, 0, 0, 10],
50.             },
51.           },
52.           xAxis: {
53.             // name: "班级",
54.             triggerEvent: true,
55.             data: ['2023/05/17', '2023/05/18', '2023/03/19', '2023/05/19', '2023/05/20', '2023/05/21', '2023/05/22'],
56.             axisLabel: {
57.                show: true,
58.               fontSize: 14,
59.               color: '#C9D2FA',
60.               rotate: 10, // 设置旋转角度为30度
61.               align: 'right',
62.               verticalAlign: 'top',
63.             },
64.             axisLine: {
65.               show: false,
66.               lineStyle: {
67.                 show: false,
68.                 color: '#F3F3F3',
69.                 width: 2,
70.               },
71.             },
73.             axisTick: {
74.               show: false,
75.             },
76.           },
77.           yAxis: [
78.             {
79.               // name: '单位:万',
80.               // type: 'value',
81.               // nameTextStyle: {
82.               //   color: '#444444',
83.               // },
84.               axisLabel: {
85.                 interval: 0,
86.                 show: true,
87.                 fontSize: 18,
88.                 color: '#C9D2FA',
89.               },
90.               axisLine: {
91.                 show: false,
92.                 // lineStyle: {
93.                 //   color: "#F3F3F3",
94.                 //   width: 2
95.                 // }
96.               },
97.               axisTick: {
98.                 show: false,
99.               },
100.               splitLine: {
101.                 lineStyle: {
102.                   type: 'dashed',
103.                   color: '#3E4A82',
104.                 },
105.               },
106.             },
107.           ],
108.           series: [
109.             {
110.               name: '订单',
111.               type: 'bar',
112.                 align: 'center',
113.               silent: true,
114.               itemStyle: {
115.                 normal: {
116.                   color: '#2F8FFF',
117.                 },
118.               },
119.               label: {
120.                 show: true,
121.                 color: '#2F8FFF',
122.                 fontSize: 14,
123.                 position: 'top', // 显示位置，可选值有 'top', 'bottom', 'inside', 'outside'
124.                 formatter: '{c}', // 标签内容格式器，这里表示显示数据值
125.               },
126.               data: [120, 75, 90, 102, 130, 75, 99],
127.             },
128.             {
129.               name: '销售额',
130.               type: 'bar',
131.               silent: true,
132.               itemStyle: {
133.                 normal: {
134.                   color: '#47B558',
135.                 },
136.               },
137.               label: {
138.                 show: true,
139.                 color: '#47B558',
140.                 fontSize: 14,
141.                 position: 'top', // 显示位置，可选值有 'top', 'bottom', 'inside', 'outside'
142.                 formatter: '{c}', // 标签内容格式器，这里表示显示数据值
143.               },
144.               data: [102, 130, 75, 99, 120, 75, 90],
145.             },
146.           ],
147.         }
149. )
150. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。