营业额数据

src/module/databoard/databoard/turnover-detail.vue

 <template>
   <div class="turnover-detail">
     <div class="card-board">
-      <contrast-card v-for="(data,key)  in currentData.head" style="height: 100%;width: 20%;" :class="{'selectCard': key}"
+      <contrast-card v-for="(data,key)  in currentData.head" style="height: 100%;width: 20%;"
+                     :class="{'selectCard': key}"
                      @click.native="selectLegend(key)">
         <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px"
                             :title-style="{'font-weight': 'bold'}" :title="key" :content="data.amount" isBold/>
@@ -118,7 +119,7 @@ export default {
       currentBtn: "day",
       currentLegend: '汽运(元)',
       currentCard: '营业额',
-      chartOption:{
+      chartOption: {
         legend: {
           textStyle: {
             color: 'white'
@@ -143,66 +144,66 @@ export default {
           }
         },
         series: [
-            {
-              type: 'bar',
-              label: {
-                show: true,
-                position: 'top',
-                color: "#00CCD2",
-              },
-              color: {
-                type: 'linear',
-                x: 0, y: 0, x2: 0, y2: 1,
-                colorStops: [
-                  {offset: 0, color: '#00CCD2'},
-                  {offset: 1, color: '#00A2FF'}
-                ]
-              },
+          {
+            type: 'bar',
+            label: {
+              show: true,
+              position: 'top',
+              color: "#00CCD2",
             },
-            {
-              type: 'bar',
-              label: {
-                show: true,
-                position: 'top',
-                color: "#FFFAB7",
-              },
-              color: {
-                type: 'linear',
-                x: 0, y: 0, x2: 0, y2: 1,
-                colorStops: [
-                  {offset: 0, color: '#FFFAB7'},
-                  {offset: 1, color: '#FFF459'}
-                ]
-              },
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                {offset: 0, color: '#00CCD2'},
+                {offset: 1, color: '#00A2FF'}
+              ]
             },
-            {
-              type: 'bar',
-              label: {
-                show: true,
-                position: 'top',
-                color: "#81FBB8",
-              },
-              color: {
-                type: 'linear',
-                x: 0, y: 0, x2: 0, y2: 1,
-                colorStops: [
-                  {offset: 0, color: '#81FBB8'},
-                  {offset: 1, color: '#28C76F'}
-                ]
-              },
+          },
+          {
+            type: 'bar',
+            label: {
+              show: true,
+              position: 'top',
+              color: "#FFFAB7",
             },
-            {
-              type: 'line',
-              color: 'red',
-              data: []
-            }
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                {offset: 0, color: '#FFFAB7'},
+                {offset: 1, color: '#FFF459'}
+              ]
+            },
+          },
+          {
+            type: 'bar',
+            label: {
+              show: true,
+              position: 'top',
+              color: "#81FBB8",
+            },
+            color: {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                {offset: 0, color: '#81FBB8'},
+                {offset: 1, color: '#28C76F'}
+              ]
+            },
+          },
+          {
+            type: 'line',
+            color: 'red',
+            data: []
+          }
         ]
       }
     }
   },
   watch: {},
   methods: {
-    back(){
+    back() {
       this.$router.push({path: '/'});
     },
     resizeChart() {
@@ -253,10 +254,28 @@ export default {
         case '铁运营业额':
           name = "铁运(元)";
           break;
+        case '汽运成本':
+          name = "汽运(元)";
+          break;
+        case '水运成本':
+          name = "水运(元)";
+          break;
+        case '铁运成本':
+          name = "铁运(元)";
+          break;
+
+        case '汽运毛利':
+          name = "汽运(元)";
+          break;
+        case '水运毛利':
+          name = "水运(元)";
+          break;
+        case '铁运毛利':
+          name = "铁运(元)";
+          break;
         default:
           break;
       }
-      console.log(name)
       if (name) {
         this.chart.dispatchAction({
           type: 'legendInverseSelect'
@@ -271,7 +290,7 @@ export default {
         this.chartOption.series[3].data = [];
       }
       this.currentLegend = name;
-      this.currentCard = data.title;
+      this.currentCard = title;
       this.chart.setOption(this.chartOption);
 
     },
@@ -345,11 +364,12 @@ input[type="button"] {
   background-color: #1234a1;
 }
 
-input[type="button"]:hover{
+input[type="button"]:hover {
   color: #1234a1 !important;
   background-color: #00c8d6 !important;
 }
-.selectedBtn{
+
+.selectedBtn {
   color: #1234a1 !important;
   background-color: #00c8d6 !important;
 }
@@ -358,7 +378,8 @@ input[type="button"]:hover{
   color: #00c8d6;
   background-color: #1234a1;
 }
-.selectCard{
+
+.selectCard {
   background-color: var(--card-background-select-color) !important;
 }
 </style>