大屏项目 vue3(一)

项目创建

构建工具：vite+ vue-ts

创建项目：pnpm create vite chart-for-screen-vue3 --template vue-ts

安装图表类依赖：pnpm add @jiaminghi/pnpm add echarts @kjgl77/datav-vue3,pnpm add -D less

删除index.css和app.css文件里的根元素以外的样式

适配处理-scale

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { scale } from "./utils/index";

const scaleValue = ref(1);

const updateScale = () => {
  scaleValue.value = scale();
};
onMounted(() => {
  updateScale();
  window.addEventListener("resize", updateScale);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateScale);
});
</script>

<template>
  <div class="app"></div>
</template>

<style scoped lang="less">
.app {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
}
</style>

组件库引入

1. 全局引入
2. 按需引入

main.js全局注册

import DataVVue3 from "@kjgl77/datav-vue3";

const app = createApp(App);
app.use(DataVVue3);
app.mount("#app");

按需引入

<!-- 在.vue文件的script中import部分组件 -->
<script lang="ts" setup>
import { Decoration1, Decoration2 } from "@kjgl77/datav-vue3";
</script>
<template>
  <!-- 引入之后就可以在vue的template中直接使用 -->
  <decoration-1 :color="['pink', 'yellow']" style="width:200px;height:50px;" />
  <decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>

图表组件实现

<template>
  <div class="box1">
    <dv-border-box1>
      <div ref="chartRef" class="chart-container"></div>
    </dv-border-box1>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

const chartRef = ref<HTMLDivElement | null>(null);
let chart: echarts.ECharts | null = null;

onMounted(() => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    const options = {};
    chart.setOption(options);
  }
});
onUnmounted(() => {
  if (chart) {
    // 清理图表实例
    chart.dispose();
  }
});
</script>
<style lang="less" scoped>
.box1 {
  width: 640px;
  height: 560px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>