feat: 添加vue-echarts并注册到全局

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",

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");

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() {},