vue3+echarts5+vite+typescript构建数据可视化大屏驾驶舱

在新技术的驱动下，vue3的版本趋于稳定，使用方式更被大众所熟知，随着echarts5的升级带来了更加符合现代化的视觉体验以及开发配置更加方便，因此搭建基于vue3，echarts5，vite，typescript构建数据可视化驾驶舱大屏。
如果你还未接触过vue或者对echarts还不熟知，建议先看一下官方文档，并配合vue2+echarts构建的项目入手。

项目框架搭建及配置

1.项目框架搭建
关于vue3+vite+ts构建项目这里不多赘述，这些不是本篇的主要内容，项目结构构建完成如下图所示，和vue-cli4构建出来的项目目录差不多类似的，只是index.html入口文件从public中提到根目录等一些变化，如果vite的使用还不是很熟悉可以看下官方文档。

2.安装echarts
有cnpm / yarn的可以使用相应命令安装

npm install echarts --save

3.1使用传统的vue写法结构进行引入使用

• 在main.js中导入

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
 
const app = createApp(App).mount('#app')
app.echarts=echarts

• 和原来vue2一样在monted钩子函数中使用

mounted() {
    //this.$root => app
    let myChart = this.$root.echarts.init(
      document.getElementById("chartDemo")
    );
    // 绘制图表
   this.option = {
   		xAxis: {
        	type: 'category',
       		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       		},
   	 	yAxis: {
        	type: 'value'
        	},
	    series: [{
	        data: [150, 230, 224, 218, 135, 147, 260],
	        type: 'line'
	    }]
   	};
   	 myChart.setOption(this.option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
  },

3.2使用组合式api进行使用
因为setup中没有this,而且这时候还没有渲染,所以在setup中 ,可以使用provide/inject来把echart引入进来

• 在App.vue中把echarts引进来

import * as echarts from 'echarts'
import { provide } from 'vue'
 
export default {
  name: 'App',
  setup(){
    provide('echarts',echarts)
  },
}

• 在所需的组件中inject

import { inject, onMounted } from "vue";
export default {
  name: "data",
  setup() {
    let echarts = inject("echarts");//引入
    onMounted(() => {
     let myChart = echarts.init(document.getElementById("chartDemo"));
      // 绘制图表
     let option = {
   		xAxis: {
        	type: 'category',
       		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       		},
   	 	yAxis: {
        	type: 'value'
        	},
	    series: [{
	        data: [150, 230, 224, 218, 135, 147, 260],
	        type: 'line'
	    }]
   	};
   	 myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    });
  },
};

自适应处理

数据可视化的使用设备及其多，屏幕多分辨率适配显然尤为重要，对于此类的适配方案有很多种，我这里也罗列出来几种，并且对各种方案的优缺点进行了说明，点击查阅这里