* Add Chart init.

module/metric/css/preview.ui.css

@@ -37,6 +37,8 @@
 .main .canvas {height: calc(100vh - 172px + 48px); max-height: 920px; overflow-y: hidden;}
 .main .table-and-charts {height: calc(100vh - 172px); max-height: calc(100% - 48px); overflow-y: scroll;}
 .main .metricBox {max-height: 408px;}
+.chart-container {height: 100%; width: 100%;}
+.chart-type {width: 30%; padding-left: 50px;}
 
 .table-and-chart .table-side {flex: 0 0 400px; overflow-x: hidden;}
 .table-and-chart .chart-side {flex: 0 0 calc(100% - 400px);}

module/metric/js/preview.ui.js

@@ -232,6 +232,7 @@ window.afterPageUpdate = function($target, info, options)
     window.checkedList = [{id:current.id + '', name:current.name}];
     window.filterChecked = {};
     window.renderDTable();
+    window.renderChart();
     if(viewType == 'multiple') window.renderCheckedLabel();
     $(window).on('resize', window.renderCheckedLabel);
     window.initFilterPanel();
@@ -268,6 +269,15 @@ window.renderDTable = function()
     window.initDTable($currentBox.find('.dtable'), resultHeader, resultData);
 }
 
+window.renderChart = function()
+{
+    var $currentBox = $('#metricBox' + current.id);
+    if(viewType == 'single') $currentBox = $('.table-and-chart-single');
+    if(!$currentBox.find('.chart').length) return;
+
+    window.initChart($currentBox.find('.chart')[0], resultHeader, resultData);
+}
+
 window.initDTable = function($obj, head, data)
 {
     var height = 328;
@@ -292,6 +302,56 @@ window.initDTable = function($obj, head, data)
     });
 }
 
+window.initChart = function($obj, head, data, chartType = 'line') 
+{
+    if(head.length == 3)
+    {
+        var x = head[0].name;
+        var y = head[1].name;
+    }
+    if(!x || !y) return;
+
+    var type  = (chartType == 'barX' || chartType == 'barY') ? 'bar' : chartType;
+    var xAxis = {
+        type: 'category',
+        data: data.map(function(item){return item[x]})
+    };
+    var yAxis = {
+        type: 'value'
+    };
+
+    $.getLib(config.webRoot + 'js/echarts/echarts.common.min.js', {root: false}, function() {
+
+        var myChart = echarts.init($obj);
+        var option = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            xAxis: chartType == 'barY' ? yAxis : xAxis,
+            yAxis: chartType == 'barY' ? xAxis : yAxis,
+            series: [
+                {
+                    data: data.map(function(item){return item[y]}),
+                    type: type
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+    });
+
+}
+
+window.handleChartTypeChange = function($el)
+{
+    if(viewType == 'single') 
+    {
+        var chartType = $('[name=chartType]').val();
+
+        window.initChart($('.table-and-chart-single').find('.chart')[0], resultHeader, resultData, chartType);
+    }
+}
+
 window.handleRemoveLabel = function(id)
 {
     var checkedItem = window.checkedList.find(function(checked){return checked.id == id});
@@ -363,7 +423,6 @@ window.updateMetricBoxs = function(id, isChecked)
             var data = JSON.parse(resp);
             if(data) window.initDTable($('#metricBox' + id).find('.dtable'), data.header, data.data);
         });
-
     }
 }
 

module/metric/lang/zh-cn.php

@@ -176,6 +176,11 @@ if($config->edition != 'open')
 $lang->metric->objectList['review'] = "评审";
 $lang->metric->objectList['other']  = "其他";
 
+$lang->metric->chartTypeList = array();
+$lang->metric->chartTypeList['line'] = '折线图';
+$lang->metric->chartTypeList['barX'] = '柱形图';
+$lang->metric->chartTypeList['barY'] = '条形图';
+
 $lang->metric->filter = new stdclass();
 $lang->metric->filter->common  = '筛选';
 $lang->metric->filter->scope   = '范围';

module/metric/ui/previewsingle.html.php

@@ -206,8 +206,22 @@ div
             ),
             div
             (
-                setClass('chart-side chart-center'),
-                'chart'
+                setClass('chart-side'),
+                div
+                (
+                    setClass('chart-type'),
+                    picker
+                    (
+                        set::required(true),
+                        set::name('chartType'),
+                        set::items($lang->metric->chartTypeList),
+                        set('onchange', 'window.handleChartTypeChange(this)'),
+                    )
+                ),
+                div
+                (
+                    setClass('chart chart-container'),
+                ),
             ),
         ),
     ),