diff --git a/module/metric/control.php b/module/metric/control.php
index 544c99a99a..57a066e5f7 100755
--- a/module/metric/control.php
+++ b/module/metric/control.php
@@ -76,6 +76,7 @@ class metric extends control
         $this->view->filtersBase64 = $filtersBase64;
         $this->view->resultHeader  = $resultHeader;
         $this->view->resultData    = $resultData;
+        $this->view->echartOptions = $this->metric->getEchartsOptions($resultHeader, $resultData);
         $this->display();
     }
 
diff --git a/module/metric/css/preview.ui.css b/module/metric/css/preview.ui.css
index 3b5d3038ed..e0ec8d45ec 100644
--- a/module/metric/css/preview.ui.css
+++ b/module/metric/css/preview.ui.css
@@ -46,7 +46,7 @@
 i.star-empty {color: var(--color-slate-400);}
 i.star {color: var(--color-warning-300);}
 
-.table-and-chart .table-side {flex: 0 0 480px; overflow-x: hidden;}
+.table-and-chart .table-side {flex: 0 0 480px;}
 .table-and-chart .chart-side {flex: 0 0 calc(100% - 480px);}
 .table-and-chart .chart-center {display:flex; justify-content: center; align-items: center;}
 
diff --git a/module/metric/js/common.ui.js b/module/metric/js/common.ui.js
index a02d06ba43..8ac8b4d891 100644
--- a/module/metric/js/common.ui.js
+++ b/module/metric/js/common.ui.js
@@ -13,3 +13,34 @@ window.addUnit = function(e)
         $("[name^='customUnit']").prop('checked', false);
     }
 }
+
+window.renderDTableCell = function(result, {row, col})
+{
+    var commonWidth = {
+        scope: 160,
+        date: 96,
+        value: 96,
+        calcTime: 128,
+    };
+    var width = 480;
+
+    var cols = Object.keys(row.data);
+
+    var cellWidth = {};
+    cols.forEach(function(col) {
+        if(commonWidth[col]) {
+            cellWidth[col] = commonWidth[col];
+        }
+    });
+
+    colsWidth = Object.values(cellWidth).reduce((a, b) => a + b, 0);
+    Object.keys(cellWidth).forEach(function(col) {
+        cellWidth[col] = Math.floor(cellWidth[col] / colsWidth * width);
+    });
+
+
+    var html = `<span class="cell-ellipsis" style="width: ${cellWidth[col.name] - 24}px;" title="${row.data[col.name]}">${row.data[col.name]}</span>`;
+    result[0] = {html: html};
+
+    return result;
+}
diff --git a/module/metric/js/preview.ui.js b/module/metric/js/preview.ui.js
index 9763b4a8d2..061ed944c4 100644
--- a/module/metric/js/preview.ui.js
+++ b/module/metric/js/preview.ui.js
@@ -8,10 +8,12 @@ window.afterPageUpdate = function($target, info, options)
         chartList.push({value: key, text: chartTypeList[key]});
     }
     window.filterChecked = {};
-    window.renderDTable(current.id, resultHeader, resultData);
-    window.renderChart(current.id, resultHeader, resultData);
-    if(viewType == 'multiple') window.renderCheckedLabel();
-    $(window).on('resize', window.renderCheckedLabel);
+
+    if(viewType == 'multiple') 
+    {
+        window.renderCheckedLabel();
+        $(window).on('resize', window.renderCheckedLabel);
+    }
     window.initFilterPanel();
 }
 
diff --git a/module/metric/model.php b/module/metric/model.php
index 22d7447f88..8c9992757f 100755
--- a/module/metric/model.php
+++ b/module/metric/model.php
@@ -1196,4 +1196,90 @@ class metricModel extends model
         if(empty($type)) $type[] = 'system';
         return implode('-', $type);
     }
+
+    /**
+     * 获取一个echarts的配置项。
+     * Get options of echarts by head and data.
+     *
+     * @param  array    $head 表头
+     * @param  array    $datas 数据
+     * @param  string   $chartType 图表类型 barX|barY|line|pie
+     * @access public
+     * @return array|false
+     */
+    public function getEchartsOptions(array $head, array $datas, string $chartType = 'line'): array|false
+    {
+        if(!$head || !$datas) return false;
+
+        $headLength = count($head);
+        if($headLength == 2)
+        {
+            $x = $head[1]['name'];
+            $y = $head[0]['name'];
+        }
+        elseif($headLength == 3)
+        {
+            $x = $head[0]['name'];
+            $y = $head[1]['name'];
+        }
+        elseif($headLength == 4)
+        {
+            $x = $head[1]['name'];
+            $y = $head[2]['name'];
+        }
+
+        if(!$x || !$y) return false;
+
+        $type = in_array($chartType, array('barX', 'barY')) ? 'bar' : $chartType;
+
+        $xAxis = array('type' => 'category', 'data' => array_unique(array_column($datas, $x)));
+        sort($xAxis['data']);
+        $yAxis = array('type' => 'value');
+
+        $series = array();
+        if($headLength <= 3)
+        {
+            $series = array('type' => $type, 'data' => array_column($datas, $y));
+        }
+        elseif($headLength == 4)
+        {
+            $groupedData = array();
+            foreach($datas as $data)
+            {
+                $scope = $data->scope;
+                $date  = $data->date;
+                $value = $data->value;
+
+                if(!isset($groupedData[$scope])) $groupedData[$scope] = array();
+                $groupedData[$scope][] = array('value' => $value, 'date' => $date);
+            }
+
+            foreach($groupedData as $scope => $groups)
+            {
+                $seriesData = array();
+                foreach($xAxis['data'] as $date)
+                {
+                    $value = 0;
+                    foreach($groups as $group)
+                    {
+                        if($group['date'] == $date)
+                        {
+                            $value = $group['value'];
+                            break;
+                        }
+                    }
+                    $seriesData[] = $value;
+                }
+
+                $series[] = array('type' => $type, 'name' => $scope, 'data' => $seriesData);
+            }
+        }
+
+        $options = array();
+        $options['xAxis']  = $xAxis;
+        $options['yAxis']  = $yAxis;
+        $options['series'] = $series;
+
+        return $options;
+    }
 }
diff --git a/module/metric/ui/previewmultiple.html.php b/module/metric/ui/previewmultiple.html.php
index dedfa35d6c..9498c4fea7 100644
--- a/module/metric/ui/previewmultiple.html.php
+++ b/module/metric/ui/previewmultiple.html.php
@@ -270,6 +270,97 @@ div
     ),
 );
 
+$metricBoxs = div
+(
+    set::id('metricBox' . $current->id),
+    set('metric-id', $current->id),
+    setClass('metricBox'),
+    div
+    (
+        setClass('metric-name flex flex-between items-center'),
+        div
+        (
+            span
+            (
+                setClass('metric-name-weight'),
+                isset($current) ? $current->name : null,
+            ),
+        ),
+        div
+        (
+            setClass('flex-start'),
+            toolbar
+            (
+                haspriv('metric', 'details') ? item(set(array
+                (
+                    'text'  => $this->lang->metric->details,
+                    'class' => 'ghost details',
+                    'url'         => helper::createLink('metric', 'details', "metricID=$current->id"),
+                    'data-toggle' => 'modal'
+                ))) : null,
+                item(set(array
+                (
+                    'text'    => $this->lang->metric->remove,
+                    'class'   => 'ghost metric-remove hidden',
+                    'onclick' => "window.handleRemoveLabel($current->id)"
+                ))),
+                haspriv('metric', 'filters') ? item(set(array
+                (
+                    'icon'  => 'menu-backend',
+                    'text'  => $this->lang->metric->filters,
+                    'class' => 'ghost hidden',
+                    'url'   => '#',
+                ))) : null,
+                haspriv('metric', 'zAnalysis') ? item(set(array
+                (
+                    'icon'  => 'chart-line',
+                    'text'  => $this->lang->metric->zAnalysis,
+                    'class' => 'ghost chart-line-margin hidden',
+                    'url'   => '#',
+                ))) : null,
+            ),
+        ),
+    ),
+    div
+    (
+        setClass('table-and-chart table-and-chart-multiple'),
+        div
+        (
+            setClass('table-side'),
+            div
+            (
+                $resultData ? dtable
+                (
+                    set::height(310),
+                    set::bordered(true),
+                    set::cols($resultHeader),
+                    set::data(array_values($resultData)),
+                    set::onRenderCell(jsRaw('window.renderDTableCell')),
+                ) : null,
+
+            )
+        ),
+        div
+        (
+            setClass('chart-side'),
+            div
+            (
+                setClass('chart-type'),
+            ),
+            div
+            (
+                setClass('chart chart-multiple'),
+                $echartOptions ? echarts
+                (
+                    set::xAxis($echartOptions['xAxis']),
+                    set::yAxis($echartOptions['yAxis']),
+                    set::series($echartOptions['series']),
+                )->size('100%', '100%') : null,
+            )
+        ),
+    ),
+);
+
 div
 (
     setClass('main'),
@@ -313,82 +404,7 @@ div
         div
         (
             setClass('table-and-charts'),
-            div
-            (
-                set::id('metricBox' . $current->id),
-                set('metric-id', $current->id),
-                setClass('metricBox'),
-                div
-                (
-                    setClass('metric-name flex flex-between items-center'),
-                    div
-                    (
-                        span
-                        (
-                            setClass('metric-name-weight'),
-                            isset($current) ? $current->name : null,
-                        ),
-                    ),
-                    div
-                    (
-                        setClass('flex-start'),
-                        toolbar
-                        (
-                            haspriv('metric', 'details') ? item(set(array
-                            (
-                                'text'  => $this->lang->metric->details,
-                                'class' => 'ghost details',
-                                'url'         => helper::createLink('metric', 'details', "metricID=$current->id"),
-                                'data-toggle' => 'modal'
-                            ))) : null,
-                            item(set(array
-                            (
-                                'text'    => $this->lang->metric->remove,
-                                'class'   => 'ghost metric-remove hidden',
-                                'onclick' => "window.handleRemoveLabel($current->id)"
-                            ))),
-                            haspriv('metric', 'filters') ? item(set(array
-                            (
-                                'icon'  => 'menu-backend',
-                                'text'  => $this->lang->metric->filters,
-                                'class' => 'ghost hidden',
-                                'url'   => '#',
-                            ))) : null,
-                            haspriv('metric', 'zAnalysis') ? item(set(array
-                            (
-                                'icon'  => 'chart-line',
-                                'text'  => $this->lang->metric->zAnalysis,
-                                'class' => 'ghost chart-line-margin hidden',
-                                'url'   => '#',
-                            ))) : null,
-                        ),
-                    ),
-                ),
-                div
-                (
-                    setClass('table-and-chart table-and-chart-multiple'),
-                    div
-                    (
-                        setClass('table-side'),
-                        div
-                        (
-                            setClass('dtable'),
-                        )
-                    ),
-                    div
-                    (
-                        setClass('chart-side'),
-                        div
-                        (
-                            setClass('chart-type'),
-                        ),
-                        div
-                        (
-                            setClass('chart chart-multiple'),
-                        )
-                    ),
-                ),
-            ),
+            $metricBoxs,
         ),
     ),
 );
diff --git a/module/metric/ui/previewsingle.html.php b/module/metric/ui/previewsingle.html.php
index d2c1389009..9214507c9a 100644
--- a/module/metric/ui/previewsingle.html.php
+++ b/module/metric/ui/previewsingle.html.php
@@ -64,6 +64,7 @@ $fnGenerateFilterPanel = function($code, $filterItem) use($lang)
 $filterItems = $this->metric->buildFilterCheckList($filters);
 featureBar
 (
+    set::load(''),
     set::current($scope),
     set::linkParams("scope={key}"),
     li
@@ -327,7 +328,13 @@ div
                 setClass('table-side'),
                 div
                 (
-                    setClass('dtable'),
+                    $resultData ? dtable
+                    (
+                        set::bordered(true),
+                        set::cols($resultHeader),
+                        set::data(array_values($resultData)),
+                        set::onRenderCell(jsRaw('window.renderDTableCell')),
+                    ) : null,
                 )
             ),
             div
@@ -339,7 +346,13 @@ div
                 ),
                 div
                 (
-                    setClass('chart chart-single'),
+                    setClass('chart-single'),
+                    $echartOptions ? echarts
+                    (
+                        set::xAxis($echartOptions['xAxis']),
+                        set::yAxis($echartOptions['yAxis']),
+                        set::series($echartOptions['series']),
+                    )->size('100%', '100%') : null,
                 ),
             ),
         ),