XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

echarts版本升级v4=>v6

main
wangxiaoshuang 2026-04-03 13:45:39 +08:00
parent 3f2e39f46c
commit 48cfe99f12
12 changed files with 255 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

52
src/components/readingChart/index.vue
View File

@ -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',
}

124
src/views/dashboard/components/distribution-map.vue
View File

@ -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 {

2
src/views/dashboard/components/enrollments-of-reviewers.vue
View File

@ -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

2
src/views/dashboard/components/enrollments-per-quarter.vue
View File

@ -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

2
src/views/dashboard/components/reviewers-stats.vue
View File

@ -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 {

2
src/views/dashboard/components/workload-of-months.vue
View File

@ -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

2
src/views/dashboard/components/workload-of-reviewers.vue
View File

@ -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

2
src/views/dashboard/components/workload-stats.vue
View File

@ -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 {

12
src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
View File

@ -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)

50
src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue
View File

@ -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
};

103
src/views/trials/trials-panel/trial-summary/report-forms/index.vue
View File

@ -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: {