Vue3集成Echarts

一、安装

npm install echarts --save

二、引用到Vue身上

• 在src下新建echart文件夹
• 在echart文件夹中新建index.js文件

index.js

import * as echarts from "echarts";
export default echarts;

在main.js中引入

import echarts from "@/echarts";

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

三、在组件中使用

一下是一个具体使用的例子

白色背景下

黑色背景下

<template>
  <div>
    <div
      style="width: 100%; height: 40px; display: flex; justify-content: center"
    >
        <--动态切换背景颜色 --></--动态切换背景颜色>
      <a-switch @click="switchColorMethod" v-model:checked="switchColor" /><span
        style="margin-left: 10px; font-weight: bold"
        >深色模式</span
      >
    </div>
    <a-row>
      <a-col :span="12">
        <!-- 会议数据 -->
        <div>
          <div style="font-size: 24px; color: #000000; margin-bottom: 20px">
            会议统计
          </div>
          <div>
            <div id="reservation" style="width: 640px; height: 350px"></div>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <!--  用户、评价、反馈数据-->
        <div>
          <div
            style="
              display: flex;
              justify-content: flex-end;
              font-size: 24px;
              color: #000000;
              margin-bottom: 20px;
            "
          >
            内容统计
          </div>
          <div id="threeData" style="width: 640px; height: 350px"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import echarts from "@/echarts";

const switchColor = ref(false);
onMounted(() => {
  initReservation();
  initThreeData();
});

//动态切换背景颜色
function switchColorMethod() {
  initReservation();
  initThreeData();
}

// 用户数据展示
function initReservation() {
  var myChart = echarts.init(document.getElementById("reservation"));
  var option = {
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  };
  if (switchColor.value) {
    myChart.dispose();
    //黑色模式
    myChart = echarts.init(document.getElementById("reservation"), "dark");
    myChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  } else {
    myChart.dispose();
      //白色模式
    myChart = echarts.init(document.getElementById("reservation"));
    myChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
}

//其他全部数据展示
function initThreeData() {
  var myChart = echarts.init(document.getElementById("threeData"));
  var option = {
    title: {
      text: "其他内容",
      subtext: "实时数据",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "数据来源",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "部门" },
          { value: 735, name: "公告" },
          { value: 580, name: "通知" },
          { value: 484, name: "签到" },
          { value: 300, name: "会议室" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  if (switchColor.value) {
    myChart.dispose();
    myChart = echarts.init(document.getElementById("threeData"), "dark");
    myChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  } else {
    myChart.dispose();
    myChart = echarts.init(document.getElementById("threeData"));
    myChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
}
</script>

<style scoped>
</style>