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>