diff --git a/src/icons/svg/histogram.svg b/src/icons/svg/histogram.svg
new file mode 100644
index 00000000..3959c4ff
--- /dev/null
+++ b/src/icons/svg/histogram.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775115523115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5347" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M458.105263 970.105263h-215.578947V264.084211h215.578947V970.105263z m-161.68421-53.894737h107.789473V317.978947h-107.789473V916.210526z" fill="#ffffff" p-id="5348"></path><path d="M296.421053 970.105263h-215.578948V479.663158h215.578948V970.105263z m-161.684211-53.894737h107.789474V533.557895h-107.789474V916.210526zM943.157895 970.105263h-215.578948V479.663158h215.578948V970.105263z m-161.684211-53.894737h107.789474V533.557895h-107.789474V916.210526zM619.789474 970.105263h-215.578948V53.894737h215.578948v916.210526z m-161.684211-53.894737h107.789474V107.789474h-107.789474v808.421052z" fill="#ffffff" p-id="5349"></path><path d="M781.473684 970.105263h-215.578947V264.084211h215.578947V970.105263z m-161.68421-53.894737h107.789473V317.978947h-107.789473V916.210526z" fill="#ffffff" p-id="5350"></path></svg>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
new file mode 100644
index 00000000..89438e12
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
@@ -0,0 +1,366 @@
+<template>
+    <div class="histogram">
+        <div ref="chartContainer" style="width: 490px; height: 290px;" v-loading="loading"></div>
+    </div>
+</template>
+<script>
+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
+]);
+import {
+    getRenderingEngine,
+    cache,
+    utilities,
+    Enums,
+} from '@cornerstonejs/core';
+export default {
+    name: "histogram",
+    props: {
+        viewportKey: {
+            type: String,
+            default: 'viewport'
+        },
+        activeViewportIndex: {
+            type: Number,
+            default: 0
+        },
+        renderingEngineId: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+        return {
+            chart: null
+        }
+    },
+    methods: {
+        init() {
+
+        },
+        initChart() {
+            this.chart = echarts.init(this.$refs.chartContainer);
+            var formatTime = echarts.time.format;
+            var _data = this.generateData1();
+            const option = {
+                // Choose axis ticks based on UTC time.
+                useUTC: true,
+                title: {
+                    text: 'Intraday Chart with Breaks (Single Day)',
+                    left: 'center'
+                },
+                tooltip: {
+                    show: true,
+                    trigger: 'axis'
+                },
+                xAxis: [
+                    {
+                        type: 'time',
+                        interval: 1000 * 60 * 30,
+                        axisLabel: {
+                            showMinLabel: true,
+                            showMaxLabel: true,
+                            formatter: (value, index, extra) => {
+                                if (!extra || !extra.break) {
+                                    // The third parameter is `useUTC: true`.
+                                    return formatTime(value, '{HH}:{mm}', true);
+                                }
+                                // Only render the label on break start, but not on break end.
+                                if (extra.break.type === 'start') {
+                                    return (
+                                        formatTime(extra.break.start, '{HH}:{mm}', true) +
+                                        '/' +
+                                        formatTime(extra.break.end, '{HH}:{mm}', true)
+                                    );
+                                }
+                                return '';
+                            }
+                        },
+                        breakLabelLayout: {
+                            // Disable auto move of break labels if overlapping,
+                            // and use `axisLabel.formatter` to control the label display.
+                            moveOverlap: false
+                        },
+                        breaks: [
+                            {
+                                start: _data.breakStart,
+                                end: _data.breakEnd,
+                                gap: 0
+                            }
+                        ],
+                        breakArea: {
+                            expandOnClick: false,
+                            zigzagAmplitude: 0,
+                            zigzagZ: 200
+                        }
+                    }
+                ],
+                yAxis: {
+                    type: 'value',
+                    min: 'dataMin'
+                },
+                dataZoom: [
+                    {
+                        type: 'inside',
+                        xAxisIndex: 0
+                    },
+                    {
+                        type: 'slider',
+                        xAxisIndex: 0
+                    }
+                ],
+                series: [
+                    {
+                        type: 'line',
+                        symbolSize: 0,
+                        data: _data.seriesData
+                    }
+                ]
+            };
+            this.chart.setOption(option);
+        },
+        generateData1() {
+            var seriesData = [];
+            var time = new Date('2024-04-09T09:30:00Z');
+            var endTime = new Date('2024-04-09T15:00:00Z').getTime();
+            var breakStart = new Date('2024-04-09T11:30:00Z').getTime();
+            var breakEnd = new Date('2024-04-09T13:00:00Z').getTime();
+            for (var val = 1669; time.getTime() <= endTime;) {
+                if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
+                    val =
+                        val +
+                        Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) /
+                        100;
+                    val = +val.toFixed(2);
+                    seriesData.push([time.getTime(), val]);
+                }
+                time.setMinutes(time.getMinutes() + 1);
+            }
+            return {
+                seriesData: seriesData,
+                breakStart: breakStart,
+                breakEnd: breakEnd
+            };
+        },
+        resize() {
+            if (this.chart) {
+                this.chart.resize()
+            }
+        },
+        dispose() {
+            if (this.chart) {
+                this.chart.dispose()
+                this.chart = null
+            }
+        },
+        async getCurrentSliceValuesFromVoxelManager(renderingEngineId, viewportId) {
+            const renderingEngine = getRenderingEngine(renderingEngineId);
+            const viewport = renderingEngine.getViewport(viewportId);
+
+            const volumeId = viewport.getVolumeId();
+            if (!volumeId) {
+                throw new Error('No volumeId found on viewport');
+            }
+
+            const volume = cache.getVolume(volumeId);
+            if (!volume) {
+                throw new Error(`Volume not found in cache: ${volumeId}`);
+            }
+
+            if (!volume.load) {
+                await volume.load();
+            }
+
+            const voxelManager = volume.voxelManager;
+            if (!voxelManager) {
+                throw new Error('voxelManager not found on volume');
+            }
+
+            const [dimX, dimY, dimZ] = volume.dimensions;
+
+            const camera = viewport.getCamera();
+            const focalPoint = camera.focalPoint;
+            const orientation = this.guessOrthogonalOrientation(camera.viewPlaneNormal);
+
+            const ijk = utilities.transformWorldToIndex(volume.imageData, focalPoint);
+            const i = this.clamp(Math.round(ijk[0]), 0, dimX - 1);
+            const j = this.clamp(Math.round(ijk[1]), 0, dimY - 1);
+            const k = this.clamp(Math.round(ijk[2]), 0, dimZ - 1);
+
+            const modality =
+                volume.metadata?.Modality ||
+                volume.metadata?.modality ||
+                'UNKNOWN';
+
+            let width, height, values;
+
+            if (orientation === Enums.OrientationAxis.AXIAL) {
+                width = dimX;
+                height = dimY;
+                values = new Float32Array(width * height);
+
+                let idx = 0;
+                for (let y = 0; y < dimY; y++) {
+                    for (let x = 0; x < dimX; x++) {
+                        const raw = voxelManager.getAtIJK(x, y, k);
+                        values[idx++] = this.convertToPhysicalValue(raw, volume.metadata, modality);
+                    }
+                }
+
+                return { orientation: 'AXIAL', sliceIndex: k, width, height, values, modality };
+            }
+
+            if (orientation === Enums.OrientationAxis.CORONAL) {
+                width = dimX;
+                height = dimZ;
+                values = new Float32Array(width * height);
+
+                let idx = 0;
+                for (let z = 0; z < dimZ; z++) {
+                    for (let x = 0; x < dimX; x++) {
+                        const raw = voxelManager.getAtIJK(x, j, z);
+                        values[idx++] = this.convertToPhysicalValue(raw, volume.metadata, modality);
+                    }
+                }
+
+                return { orientation: 'CORONAL', sliceIndex: j, width, height, values, modality };
+            }
+
+            if (orientation === Enums.OrientationAxis.SAGITTAL) {
+                width = dimY;
+                height = dimZ;
+                values = new Float32Array(width * height);
+
+                let idx = 0;
+                for (let z = 0; z < dimZ; z++) {
+                    for (let y = 0; y < dimY; y++) {
+                        const raw = voxelManager.getAtIJK(i, y, z);
+                        values[idx++] = this.convertToPhysicalValue(raw, volume.metadata, modality);
+                    }
+                }
+
+                return { orientation: 'SAGITTAL', sliceIndex: i, width, height, values, modality };
+            }
+
+            throw new Error('Unsupported orientation');
+        },
+
+        convertToPhysicalValue(storedValue, metadata, modality) {
+            if (modality === 'CT') {
+                return this.convertCTToHU(storedValue, metadata);
+            }
+
+            if (modality === 'PT' || modality === 'PET') {
+                return this.convertPETToSUV(storedValue, metadata);
+            }
+
+            return storedValue;
+        },
+
+        convertCTToHU(value, metadata) {
+            const slope = Number(metadata?.RescaleSlope ?? metadata?.rescaleSlope ?? 1);
+            const intercept = Number(
+                metadata?.RescaleIntercept ?? metadata?.rescaleIntercept ?? 0
+            );
+
+            return value * slope + intercept;
+        },
+
+        convertPETToSUV(value, metadata) {
+            // 先尝试判断当前值是否已经是 SUV
+            const units = metadata?.Units || metadata?.units || '';
+            const correctedImage = metadata?.CorrectedImage || metadata?.correctedImage;
+            // 如果数据已明确是 SUV，可以直接返回
+            if (
+                typeof units === 'string' &&
+                units.toUpperCase().includes('SUV')
+            ) {
+                return value;
+            }
+
+            // 有些数据会先经过Rescale
+            const slope = Number(metadata?.RescaleSlope ?? metadata?.rescaleSlope ?? 1);
+            const intercept = Number(
+                metadata?.RescaleIntercept ?? metadata?.rescaleIntercept ?? 0
+            );
+            const activityConcentration = value * slope + intercept;
+
+            // 如果 metadata 中已有 suvFactor，优先使用
+            const suvFactor = metadata?.suvFactor ?? metadata?.SUVFactor;
+            if (suvFactor != null) {
+                return activityConcentration * Number(suvFactor);
+            }
+
+            // 如果没有足够信息计算 SUV，就退化返回 rescale 后值
+            // 这可能是 Bq/ml，而不是真正SUV
+            return activityConcentration;
+        },
+
+        getValueType(modality, metadata) {
+            if (modality === 'CT') {
+                return 'HU';
+            }
+
+            if (modality === 'PT' || modality === 'PET') {
+                const units = metadata?.Units || metadata?.units || '';
+                if (typeof units === 'string' && units.toUpperCase().includes('SUV')) {
+                    return 'SUV';
+                }
+
+                if (metadata?.suvFactor != null || metadata?.SUVFactor != null) {
+                    return 'SUV';
+                }
+
+                return 'PET';
+            }
+
+            return 'RAW';
+        },
+
+        clamp(v, min, max) {
+            return Math.max(min, Math.min(max, v));
+        },
+
+        guessOrthogonalOrientation(viewPlaneNormal) {
+            const [nx, ny, nz] = viewPlaneNormal.map(Math.abs);
+
+            if (nz >= nx && nz >= ny) {
+                return Enums.OrientationAxis.AXIAL;
+            }
+
+            if (ny >= nx && ny >= nz) {
+                return Enums.OrientationAxis.CORONAL;
+            }
+
+            return Enums.OrientationAxis.SAGITTAL;
+        }
+    }
+}
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file