From 15db849fd6dcc6a307c37455e24f3eb41165d530 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Thu, 24 Oct 2024 11:25:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0vue-echarts=E5=B9=B6?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E5=88=B0=E5=85=A8=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |  3 ++-
 src/main.js              |  4 ++++
 src/views/home/testx.vue | 50 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1a17ce14..204bc5ef 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
 		"dagre": "^0.8.5",
 		"dagre-d3": "^0.6.4",
 		"dhtmlx-gantt": "^8.0.6",
-		"echarts": "5.4.1",
+		"echarts": "^5.5.1",
 		"element-plus": "^2.7.4",
 		"file-saver": "^2.0.5",
 		"html2canvas": "^1.4.1",
@@ -42,6 +42,7 @@
 		"three": "^0.155.0",
 		"tinymce": "6.3.2",
 		"vue": "3.2.47",
+		"vue-echarts": "^7.0.3",
 		"vue-i18n": "9.2.2",
 		"vue-router": "4.1.6",
 		"vuedraggable": "4.0.3",
diff --git a/src/main.js b/src/main.js
index 04e3c147..c4954c90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@ import htmlToPdf from "./utils/htmlToPdf";
 
 import * as Cesium from "cesium";
 
+import "echarts";
+import ECharts from 'vue-echarts';
+
 const app = createApp(App);
 
 app.use(store);
@@ -33,6 +36,7 @@ app.use(Xlsx);
 app.use(htmlToPdf);
 app.use(jsBarCode);
 app.use(DataVVue3);
+app.component('v-chart', ECharts);
 
 //挂载app
 app.mount("#app");
diff --git a/src/views/home/testx.vue b/src/views/home/testx.vue
index 6b13dbc0..d524e3df 100644
--- a/src/views/home/testx.vue
+++ b/src/views/home/testx.vue
@@ -6,6 +6,7 @@
                 <el-menu-item index="2" @click="currentM='带默认的选择'">带默认的选择</el-menu-item>
                 <el-menu-item index="3" @click="currentM='图标选择'">图标选择</el-menu-item>
                 <el-menu-item index="4" @click="currentM='表格选择'">表格选择</el-menu-item>
+                <el-menu-item index="5" @click="currentM='vue-echarts'">vue-echarts</el-menu-item>
             </el-menu>
         </el-aside>
 		<el-main>
@@ -34,6 +35,9 @@
 					></el-table-column>
 				</ehsTableSelect>
 			</div>
+            <div v-if="currentM=='vue-echarts'">
+                <v-chart :option="chartOption" autoresize  style="height: 400px; width: 400px"/>
+            </div>
 		</el-main>
 	</el-container>
 </template>
@@ -50,6 +54,52 @@ export default {
 			// x:null,
 			apiObj2: this.$API.system.user.list,
 			x2: {},
+            chartOption: {
+              textStyle: {
+                fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+              },
+              title: {
+                text: 'Traffic Sources',
+                left: 'center',
+              },
+              tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b} : {c} ({d}%)',
+              },
+              legend: {
+                orient: 'vertical',
+                left: 'left',
+                data: [
+                  'Direct',
+                  'Email',
+                  'Ad Networks',
+                  'Video Ads',
+                  'Search Engines',
+                ],
+              },
+              series: [
+                {
+                  name: 'Traffic Sources',
+                  type: 'pie',
+                  radius: '55%',
+                  center: ['50%', '60%'],
+                  data: [
+                    { value: 335, name: 'Direct' },
+                    { value: 310, name: 'Email' },
+                    { value: 234, name: 'Ad Networks' },
+                    { value: 135, name: 'Video Ads' },
+                    { value: 1548, name: 'Search Engines' },
+                  ],
+                  emphasis: {
+                    itemStyle: {
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    },
+                  },
+                },
+              ],
+            },
 		};
 	},
 	mounted() {},