feat: npm底部tab

src/Login.vue

@@ -27,7 +27,7 @@
             class="inputstyle login__button"
             @click="login"
               style="font-size: 16px;"
-            >{{$t('common.login')}}</el-button
+            >Login</el-button
           >
         </el-form-item>
       </el-form>

src/assets/css/common.scss

@@ -34,7 +34,10 @@ body {
 ::-webkit-scrollbar-track-piece {
   background-color: transparent;
 }
-
+/* input的placeholder字色 */
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: lighten(#0091ff, 20%);
+}
 .myDatePicker .el-picker-panel__footer{
   .el-button{
     display: none;

src/assets/css/theme.scss

@@ -3,6 +3,9 @@
 /** 重写element-ui变量 **/
 
 $--color-primary: #0091ff; // 主题色
+$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
+$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
+$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%
 
 /* menu相关 */
 $--menu-background-color: #00162B; // menu背景色
@@ -12,19 +15,6 @@ $--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景
 
 /** 自定义变量 **/
 :root {
-  --theme-color: #FA901C; // 默认主题色，下方深化、浅化的色值默认值是写死的；用户自定义修改主题色后，由js计算新值
-  --theme-color-dark-10: #E18219; // 默认主题色 深10%
-  --theme-color-light-10: #FA9B33; // 默认主题色 浅10%
-  --theme-color-light-20: #FBA649; // 默认主题色 浅20%
-  --theme-color-light-30: #FBB160; // 默认主题色 浅30%
-  --theme-color-light-40: #FBBC77; // 默认主题色 浅40%
-  --theme-color-light-50: #FCC88D; // 默认主题色 浅50%
-  --theme-color-light-60: #FCD4A4; // 默认主题色 浅60%
-  --theme-color-light-71: #FFDFBD; // 默认主题色 浅71%
-  --theme-color-light-80: #FFEAD2; // 默认主题色 浅80%
-  --theme-color-light-90: #FFF5E8; // 默认主题色 浅90%
-  --theme-color-light-96: #FFFBF6; // 默认主题色 浅90%
-  --theme-color-light-98: #FFFCF8; // 默认主题色 浅98%
   @media only screen  and (min-width : 1224px) {
     --chart-height-unit: 30px;
   }

src/components/charts/EchartsFrame.vue

@@ -39,6 +39,6 @@ export default {
 <style scoped>
 .cn-panel .cn-chart__echarts .pie-with-table{
   flex: 1;
-  padding: 10px;
+  padding: 10px 40px 30px;
 }
 </style>

src/components/charts/StatisticsLegend.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="chart__legend"></div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticsLegend',
+  props: {
+    data: Array
+  },
+  watch: {
+    data: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        // console.info(n)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/charts/chart-options.js

@@ -3,10 +3,9 @@
  * @date 2021/6/16
  * @description chart option和一些工具
 */
-import { calculateTextWidth } from '@/utils/tools'
+import { format } from 'echarts'
-const timeData = [['1988/10/4', 89], ['1988/10/5', 95], ['1988/10/6', 94], ['1988/10/7', 86], ['1988/10/8', 95], ['1988/10/9', 93], ['1988/10/10', 88], ['1988/10/11', 80], ['1988/10/12', 89], ['1988/10/13', 83], ['1988/10/14', 85], ['1988/10/15', 83], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 82], ['1988/10/19', 77], ['1988/10/20', 80], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 83], ['1988/10/25', 85], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 80], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 81], ['1988/11/4', 89], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 80], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 8], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
+import _ from 'lodash'
-const timeData2 = [['1988/10/4', 69], ['1988/10/5', 65], ['1988/10/6', 64], ['1988/10/7', 66], ['1988/10/8', 65], ['1988/10/9', 63], ['1988/10/10', 68], ['1988/10/11', 60], ['1988/10/12', 69], ['1988/10/13', 63], ['1988/10/14', 65], ['1988/10/15', 63], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 62], ['1988/10/19', 77], ['1988/10/20', 60], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
+
-const timeData3 = [['1988/10/4', 49], ['1988/10/5', 45], ['1988/10/6', 44], ['1988/10/7', 46], ['1988/10/8', 45], ['1988/10/9', 43], ['1988/10/10', 48], ['1988/10/11', 40], ['1988/10/12', 49], ['1988/10/13', 43], ['1988/10/14', 45], ['1988/10/15', 43], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 42], ['1988/10/19', 77], ['1988/10/20', 40], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
 const line = {
   xAxis: {
     type: 'time'
@@ -14,6 +13,7 @@ const line = {
   yAxis: {
     type: 'value'
   },
+  animation: false,
   grid: {
     left: 55,
     bottom: 45,
@@ -30,7 +30,8 @@ const line = {
     textStyle: {
       padding: [0, 0, 0, 5],
       fontSize: 14
-    }
+    },
+    formatter: tooLongFormatter
   },
   axisLabel: {
     fontSize: 14
@@ -49,20 +50,17 @@ const lineWithStatistics = {
   xAxis: {
     type: 'time'
   },
+  animation: false,
   yAxis: {
     type: 'value'
   },
+  grid: {
+    left: 55,
+    bottom: 45,
+    top: 30
+  },
   legend: {
-    show: true,
+    show: false
-    top: 'top',
-    orient: 'horizontal',
-    icon: 'circle',
-    itemGap: 20,
-    itemWidth: 10,
-    textStyle: {
-      padding: [0, 0, 0, 5],
-      fontSize: 14
-    }
   },
   axisLabel: {
     fontSize: 14
@@ -98,15 +96,7 @@ const lineStack = {
     icon: 'circle',
     itemGap: 20,
     itemWidth: 10,
-    formatter: function (name) {
+    formatter: tooLongFormatter,
-      const width = calculateTextWidth(name)
-      if (width <= 110) {
-        return name
-      } else {
-        const index = name.length / (width / 110.0) - 3
-        return name.substring(0, index) + '...'
-      }
-    },
     textStyle: {
       padding: [0, 0, 0, 5],
       fontSize: 14
@@ -117,28 +107,12 @@ const lineStack = {
   },
   series: [
     {
-      name: 'a',
+      name: '',
       type: 'line',
       stack: 'value',
       areaStyle: {},
       symbol: 'none',
-      data: timeData
+      data: []
-    },
-    {
-      name: 'bbbbbbbbbbbbbbb aerapo',
-      type: 'line',
-      stack: 'value',
-      areaStyle: {},
-      symbol: 'none',
-      data: timeData2
-    },
-    {
-      name: 'c',
-      type: 'line',
-      stack: 'value',
-      areaStyle: {},
-      symbol: 'none',
-      data: timeData3
     }
   ]
 }
@@ -146,17 +120,18 @@ const pieWithTable = {
   tooltip: {
     trigger: 'item'
   },
+  animation: false,
   legend: {
     orient: 'vertical',
     type: 'plain',
-    right: '5%',
+    left: '60%',
-    top: '30%',
+    top: 'middle',
-    height: '50%',
-    width: '40%',
     icon: 'circle',
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
-    itemGap: 20
+    itemGap: 20,
+    selectedMode: false,
+    formatter: tooLongFormatter
   },
   series: [
     {
@@ -164,6 +139,9 @@ const pieWithTable = {
       radius: ['42%', '70%'],
       center: ['30%', '50%'],
       data: [],
+      label: {
+        formatter: '{d}%'
+      },
       emphasis: {
         itemStyle: {
           shadowBlur: 10,
@@ -245,7 +223,7 @@ export function isTabs (type) {
 }
 export function getOption (type) {
   const mapping = typeOptionMappings.find(m => m.value === type)
-  return mapping && mapping.option ? JSON.parse(JSON.stringify(mapping.option)) : null
+  return mapping && mapping.option ? _.cloneDeep(mapping.option) : null
 }
 export const layoutConstant = {
   HEADER: 'header',
@@ -261,3 +239,7 @@ export function getLayout (type) {
   }
   return layout
 }
+
+function tooLongFormatter (name) {
+  return format.truncateText(name, 110, '12')
+}

src/components/charts/panel.scss

@@ -165,7 +165,15 @@
     border: none;
   }
   &>.cn-chart__tabs {
+    padding: 10px 25px 10px 15px;
+    overflow: auto;
 
+    .el-tabs__nav-wrap::after {
+      height: 1px;
+    }
+    &>.el-tabs__header {
+      margin-bottom: 10px;
+    }
   }
   &>.cn-chart__table {
     .cn-chart__header {
@@ -179,6 +187,7 @@
           display: flex;
           align-items: center;
           height: 22px;
+          margin-left: 10px;
           color: $--color-primary;
           border: 1px solid $--color-primary;
           border-radius: $--border-radius-primary;

src/components/layout/Container.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="cn-container">
     <router-view :key="routerKey"/>
-    <!-- 临时文本dom，用来计算文本长度 -->
-    <span class="temp-dom temp-dom--12"></span>
-    <span class="temp-dom temp-dom--14"></span>
   </div>
 </template>
 
@@ -30,17 +27,5 @@ export default {
   &>div {
     height: 100%;
   }
-
-  .temp-dom {
-    visibility: hidden;
-    font-size: 14px;
-    position: fixed;
-  }
-  .temp-dom--12 {
-    font-size: 12px;
-  }
-  .temp-dom--14 {
-    font-size: 14px;
-  }
 }
 </style>

src/utils/tools.js

@@ -3,6 +3,7 @@ import i18n from '@/i18n'
 import _ from 'lodash'
 import { storageKey, iso36112 } from '@/utils/constants'
 import { getIso36112JsonData } from '@/utils/api'
+import { format } from 'echarts'
 
 export const tableSort = {
   // 是否需要排序
@@ -374,10 +375,8 @@ export function isEqual (o1, o2) {
 }
 
 /* 计算文本的实际width，而不是length */
-export function calculateTextWidth (text, fontSize = 14) {
+export function getTextRect (text, fontSize = 14) {
-  const html = document.querySelector(`.temp-dom--${fontSize}`)
+  return format.getTextRect(text, `${fontSize}`)
-  html.innerText = text
-  return html.offsetWidth
 }
 
 /* url占位符处理 */

src/views/charts/Chart.vue

@@ -13,11 +13,13 @@
       :style="computePosition"
   >
     <el-tab-pane
-        v-for="(tab, index) in chartInfo.children"
+        v-for="tab in chartInfo.children"
         :label="tab.i18n ? $t(tab.i18n) : tab.name" :name="`${tab.id}`"
         :key="tab.id"
     >
-      <chart v-for="(chart, index) in tab.children" :key="index" :chart="chart" :start-time="startTime" :end-time="endTime"></chart>
+      <template v-for="(chart, index) in tab.children">
+        <chart v-if="activeTab == tab.id" :key="index" :chart="chart" :start-time="startTime" :end-time="endTime"></chart>
+      </template>
     </el-tab-pane>
   </el-tabs>
   <!-- 地图 -->
@@ -50,7 +52,10 @@
     <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{}">
       <!-- 带Table的饼图，展示Table -->
       <template v-if="isEchartsWithTable">
-        <PieTable :tableData="pieTableData" ref="pieTable"/>
+        <pie-table :tableData="pieTableData" ref="pieTable"/>
+      </template>
+      <template v-else-if="isEchartsWithStatistics">
+        <statistics-legend :data="statisticsData"></statistics-legend>
       </template>
     </template>
   </echarts-frame>
@@ -92,7 +97,7 @@
             size="mini"
             v-model="table.orderBy"
             class="option__select select-column"
-            placeholder=""
+            :placeholder="$t('common.field')"
             popper-class="option-popper"
         >
           <el-option v-for="item in table.tableColumns" :key="item" :value="item">{{item}}</el-option>
@@ -121,6 +126,7 @@ import * as echarts from 'echarts'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import am4GeoDataWorldLow from '@amcharts/amcharts4-geodata/worldChinaLow'
+import { shallowRef } from 'vue'
 
 import {
   isEcharts,
@@ -133,6 +139,7 @@ import {
   getLayout,
   layoutConstant,
   isEchartsWithTable,
+  isEchartsWithStatistics,
   isMapLine,
   isTabs
 } from '@/components/charts/chart-options'
@@ -141,6 +148,7 @@ import SingleValue from '@/components/charts/ChartSingleValue'
 import ChartTable from '@/components/charts/ChartTable'
 import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
+import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
 import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
@@ -163,6 +171,7 @@ export default {
     ChartTablePagination,
     ChartTable,
     PieTable,
+    StatisticsLegend,
     ChartMap
   },
   data () {
@@ -178,7 +187,7 @@ export default {
       pieTableData: [],
       singleValue: '-',
       activeTab: '',
-      myChart: null
+      statisticsData: []
     }
   },
   methods: {
@@ -284,14 +293,6 @@ export default {
             get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
               if (response.code === 200) {
                 const data = response.data.result
-                this.chartOption.legend.formatter = (name) => { // 根据图表宽 显示legend的字数
-                  let str = name
-                  const length = Math.floor(dom.offsetWidth / 75)
-                  if (name.length > length) {
-                    str = name.substring(0, length - 3) + '...'
-                  }
-                  return str
-                }
                 this.chartOption.series[0].data = data.map(d => {
                   return {
                     data: d,
@@ -322,19 +323,21 @@ export default {
                 }
               })
             })
-          } else {
+          } else if (this.isEchartsWithStatistics) {
             const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
             get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
               if (response.code === 200) {
+                this.statisticsData = response.data.result
                 const seriesTemplate = this.chartOption.series[0]
                 this.chartOption.series = response.data.result.map(r => {
                   return {
                     ...seriesTemplate,
                     name: r.legend,
-                    data: r.values
+                    data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
                   }
                 })
               }
+              this.myChart.setOption(this.chartOption)
               this.$nextTick(() => {
                 this.myChart.resize()
               })
@@ -428,28 +431,16 @@ export default {
       chartOption: getOption(props.chart.type),
       isEcharts: isEcharts(props.chart.type),
       isEchartsWithTable: isEchartsWithTable(props.chart.type),
+      isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
       isSingleValue: isSingleValue(props.chart.type),
       isTable: isTable(props.chart.type),
       isMap: isMap(props.chart.type),
       isTitle: isTitle(props.chart.type),
       isMapLine: isMapLine(props.chart.type),
       isTabs: isTabs(props.chart.type),
-      layout: getLayout(props.chart.type)
+      layout: getLayout(props.chart.type),
+      myChart: shallowRef({})
     }
   }
 }
 </script>
-
-<style lang="scss">
-.cn-chart__tabs {
-  padding: 10px 25px 10px 15px;
-  overflow: auto;
-
-.el-tabs__nav-wrap::after {
-  height: 1px;
-}
-&>.el-tabs__header {
-   margin-bottom: 10px;
- }
-}
-</style>