feat: chart颜色定义/单值图样式优化等

src/components/charts/ChartSingleValue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
     <div class="single-value-icon__box">
-      <div class="single-value__icon"><i class="el-icon-apple"></i></div>
+      <div class="single-value__icon"><i :class="icon"></i></div>
     </div>
     <div class="single-value__content" v-if="type === 51">
       <div class="content__data">
@@ -22,7 +22,8 @@
 export default {
   name: 'ChartSingleValue',
   props: {
-    type: Number
+    type: Number,
+    icon: String
   },
   computed: {
     singleValueClass () {

src/components/charts/chart-options.js

@@ -5,7 +5,10 @@
 */
 import { format } from 'echarts'
 import _ from 'lodash'
-export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB']
+export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
+  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
+  '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
+  '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
 export function getChartColor (index) {
   return chartColor[index % chartColor.length]
 }

src/components/charts/panel.scss

@@ -55,21 +55,18 @@
   }
   &>.cn-chart__single-value.cn-chart__single-value--icon-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    grid-template-columns:(5,200px);
 
-    .single-value-icon__box{
-      height: 70px;
-      flex: 4;
+    .single-value-icon__box {
       display: flex;
-      justify-content: space-around;
       align-items: center;
-
+      justify-content: center;
+      flex: 0 0 40%;
     }
 
     .single-value__icon {
-      margin-right: 7.5%;
+      display: flex;
+      justify-content: center;
       width: 72px;
       height: 72px;
       background-color: $--chart-single-value-icon-background-color;
@@ -77,18 +74,17 @@
 
       i {
         display: flex;
-        justify-content: space-around;
         align-items: center;
-        margin-top: 25px;
         font-size: 28px;
         color: $--color-primary;
       }
     }
 
     .single-value__content {
-      flex: 6;
       display: flex;
       flex-direction: column;
+      max-width: 60%;
+      padding-right: 10px;
 
       .content__data {
         padding-bottom: 7%;
@@ -97,7 +93,6 @@
         font-weight: bold;
       }
       .content__title {
-        width: 206px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;