From 0dea699f1f7f8cdd37c5efe2e2bf89c5cf82c12b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 8 May 2025 09:31:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(echarts):=20=E9=87=8D=E6=9E=84=20EChar?=
 =?UTF-8?q?ts=20=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=9B=BE=E8=A1=A8=E9=85=8D=E7=BD=AE-=20=E5=9C=A8=20ma?=
 =?UTF-8?q?in.js=20=E4=B8=AD=E5=BC=95=E5=85=A5=20ECharts=20=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=B9=B6=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=20Vue.prototype.$echarts=20=E4=BD=BF=20ECharts=20?=
 =?UTF-8?q?=E5=9C=A8=E5=85=A8=E5=B1=80=E5=8F=AF=E7=94=A8=20-=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20echarts.vue=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=85=A8=E5=B1=80=E7=9A=84=20$echarts=20=E6=9B=BF?=
 =?UTF-8?q?=E4=BB=A3=E5=B1=80=E9=83=A8=E5=BC=95=E5=85=A5=E7=9A=84=20echart?=
 =?UTF-8?q?s=20-=20=E4=BC=98=E5=8C=96=20overview.vue=20=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=85=8D=E7=BD=AE=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E6=B8=90=E5=8F=98=E5=92=8C=E5=81=8F=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                                   | 30 +++++++++++++++++++
 .../Logs&overview/components/echarts.vue      |  6 ++--
 .../Logs&overview/components/overview.vue     |  6 ++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/main.js b/src/main.js
index ac6a7e2..fb12325 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,36 @@ for (let item in generatedComponents) {
 }
 import '@/icons' // icon
 import '@/assets/js/utils/permission' // permission control
+import * as echarts from 'echarts'
+// 引入柱状图图表，图表后缀都为 Chart
+import { LineChart } from 'echarts/charts'
+// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent
+} from 'echarts/components'
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers'
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+])
+
+Vue.prototype.$echarts = echarts
 // set ElementUI lang to EN
 Vue.use(ElementUI, { locale })
 //二次封装的el-table
diff --git a/src/views/intelligent-agent/children/Logs&overview/components/echarts.vue b/src/views/intelligent-agent/children/Logs&overview/components/echarts.vue
index 04cb548..91a7070 100644
--- a/src/views/intelligent-agent/children/Logs&overview/components/echarts.vue
+++ b/src/views/intelligent-agent/children/Logs&overview/components/echarts.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
 import uuid from 'uuid'
 
 export default {
@@ -44,11 +44,11 @@ export default {
   filters: {},
   methods: {
     drawEcharts() {
-      let myChart = echarts.init(document.getElementById(this.echartsId))
+      let myChart = this.$echarts.init(document.getElementById(this.echartsId))
       let option = {
         ...this.options
       }
-      myChart.setOption(this.options)
+      myChart.setOption(option)
     }
   },
   created() {},
diff --git a/src/views/intelligent-agent/children/Logs&overview/components/overview.vue b/src/views/intelligent-agent/children/Logs&overview/components/overview.vue
index e9b686b..18e566f 100644
--- a/src/views/intelligent-agent/children/Logs&overview/components/overview.vue
+++ b/src/views/intelligent-agent/children/Logs&overview/components/overview.vue
@@ -61,13 +61,13 @@ export default {
                   color: '#0694A2'
                 },
                 areaStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 2, [
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                       offset: 0,
-                      color: '#F3F9FA'
+                      color: '#0694A2'
                     },
                     {
-                      offset: 0.2,
+                      offset: 1,
                       color: '#F3F9FA'
                     }
                   ])