From 48cfe99f12d536f707be63d0e595da296b5ca3f2 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Fri, 3 Apr 2026 13:45:39 +0800
Subject: [PATCH] =?UTF-8?q?echarts=E7=89=88=E6=9C=AC=E5=8D=87=E7=BA=A7v4?=
 =?UTF-8?q?=3D>v6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/components/readingChart/index.vue         |  52 ++++++--
 .../dashboard/components/distribution-map.vue | 124 +++++++++---------
 .../components/enrollments-of-reviewers.vue   |   2 +-
 .../components/enrollments-per-quarter.vue    |   2 +-
 .../dashboard/components/reviewers-stats.vue  |   2 +-
 .../components/workload-of-months.vue         |   2 +-
 .../components/workload-of-reviewers.vue      |   2 +-
 .../dashboard/components/workload-stats.vue   |   2 +-
 .../reading/dicoms3D/components/ReadPage.vue  |  12 ++
 .../subject-list/components/SubjectChart.vue  |  50 ++++++-
 .../trial-summary/report-forms/index.vue      | 103 ++++++++++++---
 12 files changed, 255 insertions(+), 100 deletions(-)

diff --git a/package.json b/package.json
index bb0c39fe..57425f0f 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "dcmjs": "^0.29.8",
     "dicom-parser": "^1.8.9",
     "dicomedit": "^0.1.0",
-    "echarts": "^4.8.0",
+    "echarts": "^6.0.0",
     "element-ui": "^2.15.14",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
diff --git a/src/components/readingChart/index.vue b/src/components/readingChart/index.vue
index 1c4ae9a8..f10c4c9c 100644
--- a/src/components/readingChart/index.vue
+++ b/src/components/readingChart/index.vue
@@ -8,20 +8,49 @@
 
 <script>
 import { getReportsChartData } from "@/api/reading"
-let echarts = require('echarts/lib/echarts');
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DataZoomComponent,
+    LegendComponent,
+    DatasetComponent,
+    // 内置数据转换器组件 (filter, sort)
+    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,
+    DataZoomComponent,
+    LegendComponent,
+    LineChart,
+    LabelLayout,
+    UniversalTransition,
+    CanvasRenderer
+]);
+// let echarts = require('echarts/lib/echarts');
 
 // 按需引入图表
 // require('echarts/lib/chart/bar');
-require('echarts/lib/chart/line');
+// require('echarts/lib/chart/line');
 // require('echarts/lib/chart/pie');
 // require('echarts/lib/chart/scatter');
 
 // 按需引入组件
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/title');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/grid');
-require('echarts/lib/component/dataZoom');
+// require('echarts/lib/component/tooltip');
+// require('echarts/lib/component/title');
+// require('echarts/lib/component/legend');
+// require('echarts/lib/component/grid');
+// require('echarts/lib/component/dataZoom');
 export default {
     name: "readingChart",
     props: {
@@ -151,7 +180,13 @@ export default {
                     text: obj.title,
                     textStyle: {
                         color: "#fff"
-                    }
+                    },
+                    left: 0,
+                    top: 0
+                },
+                grid: {
+                    left: 50,
+                    bottom: 30
                 },
                 tooltip: {
                     trigger: 'axis',
@@ -193,6 +228,7 @@ export default {
                         }
                     },
                     axisLine: {
+                        show: true,
                         lineStyle: {
                             color: '#fff',
                         }
diff --git a/src/views/dashboard/components/distribution-map.vue b/src/views/dashboard/components/distribution-map.vue
index ae8db5c3..f8e41854 100644
--- a/src/views/dashboard/components/distribution-map.vue
+++ b/src/views/dashboard/components/distribution-map.vue
@@ -2,8 +2,8 @@
   <div ref="mapbox" class="map-wrapper" />
 </template>
 <script>
-import echarts from 'echarts'
-import 'modules/echarts/map/js/world.js'
+import * as echarts from 'echarts'
+// import 'modules/echarts/map/js/world.js'
 import { fontSize } from 'utils/fontsize'
 export default {
   props: {
@@ -14,7 +14,7 @@ export default {
   watch: {
     area() {
       const that = this
-      this.$nextTick(function() {
+      this.$nextTick(function () {
         that.myChart.resize()
       })
     }
@@ -56,7 +56,7 @@ export default {
           }
         ]
       ]
-      var convertData = function(data) {
+      var convertData = function (data) {
         var res = []
         for (var i = 0; i < data.length; i++) {
           var dataItem = data[i]
@@ -77,67 +77,67 @@ export default {
         return res
       }
       var series = []
-      ;[['Shanghai', BJData]].forEach(function(item, i) {
-        series.push(
-          {
-            type: 'lines',
-            zlevel: 1,
-            effect: {
-              show: true,
-              color: '#fff',
-              period: 6,
-              trailLength: 0.7,
-              symbolSize: fontSize(0.05)
-            },
-            lineStyle: {
-              normal: {
-                width: fontSize(0.03),
-                color: '#9ae5fc',
-                opacity: 0.02,
-                curveness: -0.2
-              }
-            },
-
-            data: convertData(item[1])
-          },
-
-          {
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
-            zlevel: 3,
-            rippleEffect: {
-              // 涟漪特效
-              period: 5, // 动画时间，值越小速度越快
-              brushType: 'fill', // 波纹绘制方式 stroke, fill
-              scale: 5 // 波纹圆环最大限制，值越大波纹越大
-            },
-            label: {
-              normal: {
+        ;[['Shanghai', BJData]].forEach(function (item, i) {
+          series.push(
+            {
+              type: 'lines',
+              zlevel: 1,
+              effect: {
                 show: true,
-                color: '#fce630',
-                position: 'right', // 显示位置
-                offset: [10, 0], // 偏移设置
-                fontSize: fontSize(0.16),
-                formatter: '{b}' // 圆环显示文字
+                color: '#fff',
+                period: 6,
+                trailLength: 0.7,
+                symbolSize: fontSize(0.05)
               },
-              emphasis: {
-                show: true
-              }
-            },
-            symbol: 'circle',
-            symbolSize: function(val) {
-              return fontSize(0.08) // 圆环大小
+              lineStyle: {
+                normal: {
+                  width: fontSize(0.03),
+                  color: '#9ae5fc',
+                  opacity: 0.02,
+                  curveness: -0.2
+                }
+              },
+
+              data: convertData(item[1])
             },
 
-            data: item[1].map(function(dataItem) {
-              return {
-                name: dataItem[0].name,
-                value: geoCoordMap[dataItem[0].name]
-              }
-            })
-          }
-        )
-      })
+            {
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              zlevel: 3,
+              rippleEffect: {
+                // 涟漪特效
+                period: 5, // 动画时间，值越小速度越快
+                brushType: 'fill', // 波纹绘制方式 stroke, fill
+                scale: 5 // 波纹圆环最大限制，值越大波纹越大
+              },
+              label: {
+                normal: {
+                  show: true,
+                  color: '#fce630',
+                  position: 'right', // 显示位置
+                  offset: [10, 0], // 偏移设置
+                  fontSize: fontSize(0.16),
+                  formatter: '{b}' // 圆环显示文字
+                },
+                emphasis: {
+                  show: true
+                }
+              },
+              symbol: 'circle',
+              symbolSize: function (val) {
+                return fontSize(0.08) // 圆环大小
+              },
+
+              data: item[1].map(function (dataItem) {
+                return {
+                  name: dataItem[0].name,
+                  value: geoCoordMap[dataItem[0].name]
+                }
+              })
+            }
+          )
+        })
       var option = {
         // backgroundColor: '#fff',
         title: {
@@ -161,7 +161,7 @@ export default {
         tooltip: {
           trigger: 'item',
           fontSize: fontSize(0.16),
-          formatter: function(params) {
+          formatter: function (params) {
             if (typeof params.value === 'undefined') {
               return ''
             } else {
diff --git a/src/views/dashboard/components/enrollments-of-reviewers.vue b/src/views/dashboard/components/enrollments-of-reviewers.vue
index b693a5f8..c08e1a40 100644
--- a/src/views/dashboard/components/enrollments-of-reviewers.vue
+++ b/src/views/dashboard/components/enrollments-of-reviewers.vue
@@ -2,7 +2,7 @@
   <div ref="trials_stats" style="width:100%;height:100%;" />
 </template>
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import { getTrialCountRank } from '@/api/dashboard'
 import { fontSize } from 'utils/fontsize'
 const Count = 5
diff --git a/src/views/dashboard/components/enrollments-per-quarter.vue b/src/views/dashboard/components/enrollments-per-quarter.vue
index 2e417dfe..a91d0a79 100644
--- a/src/views/dashboard/components/enrollments-per-quarter.vue
+++ b/src/views/dashboard/components/enrollments-per-quarter.vue
@@ -2,7 +2,7 @@
   <div ref="enroll_stats" style="width:100%;height:100%;" />
 </template>
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import { getEnrollDataByQuarter } from '@/api/dashboard'
 import { fontSize } from 'utils/fontsize'
 const Count = 6
diff --git a/src/views/dashboard/components/reviewers-stats.vue b/src/views/dashboard/components/reviewers-stats.vue
index 6cb7e7f4..fabeec09 100644
--- a/src/views/dashboard/components/reviewers-stats.vue
+++ b/src/views/dashboard/components/reviewers-stats.vue
@@ -2,7 +2,7 @@
   <div ref="reviewers_stats" style="width:100%;height:100%;padding:5px;" />
 </template>
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import { getReviewersByRank } from '@/api/dashboard'
 import { fontSize } from 'utils/fontsize'
 export default {
diff --git a/src/views/dashboard/components/workload-of-months.vue b/src/views/dashboard/components/workload-of-months.vue
index a3e70784..8ba7fdd0 100644
--- a/src/views/dashboard/components/workload-of-months.vue
+++ b/src/views/dashboard/components/workload-of-months.vue
@@ -2,7 +2,7 @@
   <div ref="monthly_reading_stats" style="width:100%;height:100%;" />
 </template>
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import { getReadingDataByMonth } from '@/api/dashboard'
 import { fontSize } from 'utils/fontsize'
 const Count = 6
diff --git a/src/views/dashboard/components/workload-of-reviewers.vue b/src/views/dashboard/components/workload-of-reviewers.vue
index c6875f63..9bbab720 100644
--- a/src/views/dashboard/components/workload-of-reviewers.vue
+++ b/src/views/dashboard/components/workload-of-reviewers.vue
@@ -2,7 +2,7 @@
   <div ref="reading_rank" class="reading-rank" />
 </template>
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import { getReadingDataRank } from '@/api/dashboard'
 import { fontSize } from 'utils/fontsize'
 const Count = 5
diff --git a/src/views/dashboard/components/workload-stats.vue b/src/views/dashboard/components/workload-stats.vue
index 1f4590cd..5facec91 100644
--- a/src/views/dashboard/components/workload-stats.vue
+++ b/src/views/dashboard/components/workload-stats.vue
@@ -2,7 +2,7 @@
   <div ref="reading_stats" style="width:100%;height:100%;padding-top:5px;" />
 </template>
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import { getReadingDataByType } from '@/api/dashboard'
 import { fontSize } from 'utils/fontsize'
 export default {
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index f6ee5e5a..f296c2f8 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -165,6 +165,11 @@
               v-if="(criterionType === 0 && readingTool === 0) || this.readingTool === 3">
               <svg-icon icon-class="mpr" class="svg-icon" style="transform: rotate(180deg);" />
             </div>
+            <!-- 直方图 -->
+            <div class="tool-item" :title="`${$t('trials:reading:button:histogram')}`" @click.prevent="openHistogram"
+              v-if="this.readingTool === 3">
+              <svg-icon icon-class="histogram" class="svg-icon" />
+            </div>
             <!-- 十字准星 -->
             <div :class="['tool-item', activeTool === 'Crosshairs' ? 'tool-item-active' : '']" v-if="isMPR"
               :title="$t('trials:reading:button:crosshairs')" @click.prevent="setToolActive('Crosshairs')">
@@ -495,6 +500,7 @@
       :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
       :visible.sync="downloadImageVisible" />
     <readingChart ref="readingChart" />
+    <histogram ref="histogram" />
   </div>
 </template>
 <script>
@@ -526,6 +532,7 @@ import PetCtViewport from './PetCtViewport'
 import MPRViewport from './MPRViewport'
 import VolumeViewport from './VolumeViewport'
 import Segmentations from './Segmentations'
+import histogram from "./histogram"
 import mRecisit from './mRecist/QuestionList'
 import recisit from './Recist/QuestionList'
 import customizeQuestionList from './customize/QuestionList'
@@ -617,6 +624,7 @@ export default {
     MPRViewport,
     VolumeViewport,
     Segmentations,
+    histogram,
     mRecisit,
     recisit,
     customizeQuestionList,
@@ -906,6 +914,10 @@ export default {
     this.getSystemInfoReading();
   },
   methods: {
+    async openHistogram() {
+      let res = await this.$refs.histogram.getCurrentSliceValuesFromVoxelManager(renderingEngineId, `${this.viewportKey}-${this.activeViewportIndex}`)
+      console.log(res, 'openHistogram')
+    },
     handleSizeChange(e, viewportId) {
       // console.log('handleSizeChange', e)
       this.resetRenderingEngine(viewportId)
diff --git a/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue b/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue
index 6c25eff7..f3756c28 100644
--- a/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue
+++ b/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue
@@ -46,20 +46,49 @@ import {
     getTrialCriterionList,
     getReportsChartSummary
 } from '@/api/trials'
-let echarts = require('echarts/lib/echarts');
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DataZoomComponent,
+    LegendComponent,
+    DatasetComponent,
+    // 内置数据转换器组件 (filter, sort)
+    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,
+    DataZoomComponent,
+    LegendComponent,
+    LineChart,
+    LabelLayout,
+    UniversalTransition,
+    CanvasRenderer
+]);
+// let echarts = require('echarts/lib/echarts');
 
 // 按需引入图表
 // require('echarts/lib/chart/bar');
-require('echarts/lib/chart/line');
+// require('echarts/lib/chart/line');
 // require('echarts/lib/chart/pie');
 // require('echarts/lib/chart/scatter');
 
 // 按需引入组件
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/title');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/grid');
-require('echarts/lib/component/dataZoom');
+// require('echarts/lib/component/tooltip');
+// require('echarts/lib/component/title');
+// require('echarts/lib/component/legend');
+// require('echarts/lib/component/grid');
+// require('echarts/lib/component/dataZoom');
 export default {
     name: "SubjectChart",
     props: {
@@ -259,12 +288,19 @@ export default {
                 tooltip: {
                     trigger: 'axis',
                 },
+                grid: {
+                    left: 30,
+                    bottom: 30
+                },
                 xAxis: {
                     data: obj.visitName,
                 },
                 yAxis: {
                     name: obj.unit,
                     type: 'value',
+                    axisLine: {
+                        show: true
+                    }
                 },
                 series: obj.series
             };
diff --git a/src/views/trials/trials-panel/trial-summary/report-forms/index.vue b/src/views/trials/trials-panel/trial-summary/report-forms/index.vue
index ce84a8e1..b5432b23 100644
--- a/src/views/trials/trials-panel/trial-summary/report-forms/index.vue
+++ b/src/views/trials/trials-panel/trial-summary/report-forms/index.vue
@@ -36,17 +36,49 @@
 </template>
 <script>
 import BaseContainer from '@/components/BaseContainer'
-let echarts = require('echarts/lib/echarts');
+import * as echarts from 'echarts/core';
+import { BarChart, FunnelChart } from 'echarts/charts';
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DataZoomComponent,
+    LegendComponent,
+    MarkLineComponent,
+    DatasetComponent,
+    // 内置数据转换器组件 (filter, sort)
+    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,
+    DataZoomComponent,
+    MarkLineComponent,
+    LegendComponent,
+    BarChart,
+    FunnelChart,
+    LabelLayout,
+    UniversalTransition,
+    CanvasRenderer
+]);
+// let echarts = require('echarts/lib/echarts');
 
-require('echarts/lib/component/markLine');
-require('echarts/lib/chart/funnel');
-require('echarts/lib/chart/bar');
+// require('echarts/lib/component/markLine');
+// require('echarts/lib/chart/funnel');
+// require('echarts/lib/chart/bar');
 // 按需引入组件
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/title');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/grid');
-require('echarts/lib/component/dataZoom');
+// require('echarts/lib/component/tooltip');
+// require('echarts/lib/component/title');
+// require('echarts/lib/component/legend');
+// require('echarts/lib/component/grid');
+// require('echarts/lib/component/dataZoom');
 import {
     getTrialCriterionList,
     getTrialVisitFinishedStatList,
@@ -178,8 +210,11 @@ export default {
             this.chart_left = echarts.init(this.$refs.chartContainer_left);
             // ...图表配置
             const option = {
+                richInheritPlainLabel: false,
                 title: {
-                    text: obj.titleText
+                    text: obj.titleText,
+                    left: 0,
+                    top: 0
                 },
                 color: this.color,
                 tooltip: {
@@ -316,7 +351,13 @@ export default {
             // ...图表配置
             const option = {
                 title: {
-                    text: obj.titleText
+                    text: obj.titleText,
+                    left: 0,
+                    top: 0
+                },
+                grid: {
+                    left: 80,
+                    bottom: 50
                 },
                 toolbox: {
                     show: false
@@ -339,6 +380,9 @@ export default {
                 ],
                 yAxis: [
                     {
+                        axisLine: {
+                            show: true
+                        },
                         name: obj.unit,
                         type: 'value'
                     }
@@ -424,12 +468,18 @@ export default {
             // ...图表配置
             const option = {
                 title: {
-                    text: obj.titleText
+                    text: obj.titleText,
+                    left: 0,
+                    top: 0
                 },
                 toolbox: {
                     show: false
                 },
                 color: this.color,
+                grid: {
+                    left: 80,
+                    bottom: 50
+                },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: {
@@ -441,6 +491,9 @@ export default {
                     data: obj.xAxisData
                 },
                 yAxis: {
+                    axisLine: {
+                        show: true
+                    },
                     name: obj.unit,
                     type: 'value',
                     minInterval: 1
@@ -474,11 +527,17 @@ export default {
             // ...图表配置
             const option = {
                 title: {
-                    text: obj.titleText
+                    text: obj.titleText,
+                    left: 0,
+                    top: 0
                 },
                 toolbox: {
                     show: false
                 },
+                grid: {
+                    left: 80,
+                    bottom: 50
+                },
                 color: this.color,
                 tooltip: {
                     trigger: 'item',
@@ -498,8 +557,11 @@ export default {
                 yAxis: {
                     name: obj.unit,
                     type: 'value',
+                    axisLine: {
+                        show: true
+                    },
                     axisLabel: {
-                        formatter: '{value}%'
+                        formatter: '{value}%',
                     }
                 },
                 series: {
@@ -531,7 +593,13 @@ export default {
             // ...图表配置
             const option = {
                 title: {
-                    text: obj.titleText
+                    text: obj.titleText,
+                    left: 0,
+                    top: 0
+                },
+                grid: {
+                    left: 80,
+                    bottom: 50
                 },
                 toolbox: {
                     show: false
@@ -550,7 +618,10 @@ export default {
                 },
                 yAxis: {
                     name: obj.unit,
-                    type: 'value'
+                    type: 'value',
+                    axisLine: {
+                        show: true
+                    }
                 },
                 series: {
                     markLine: {