pda

liuqimichale
1 parent 07fc88b5
Showing 2 changed files with 138 additions and 25 deletions
src/components/barChart.vue
src/views/pdasection.vue
@@ -4,8 +4,6 @@
  
 <script>
 import echarts from 'echarts'
-
-require('echarts/theme/macarons') // echarts theme
 import {debounce} from '../utils/debounce'
  
 export default {
@@ -21,7 +19,7 @@ export default {
     },
     height: {
       type: String,
-      default: '350px'
+      default: '100%'
     },
     autoResize: {
       type: Boolean,
@@ -69,42 +67,157 @@ export default {
     setOptions({xData, yData} = {}) {
       this.chart.setOption({
         xAxis: {
-          data: xData,
           boundaryGap: true,
+          axisLabel : {
+            formatter: '{value}',
+            textStyle: {
+              color: '#59AAF7'
+            }
+          },
+          axisLine:{
+            lineStyle:{
+              color:'rgba(89,170,247,.3)'
+            }
+          },
           axisTick: {
             show: false
-          }
+          },
+          splitLine: {
+            show: false
+          },
+          data: [
+            {
+              value: xData[0],
+              textStyle: {
+                fontSize: 12,
+                color: '#59AAF7'
+              }
+            },
+            {
+              value: xData[1],
+              textStyle: {
+                fontSize: 12,
+                color: '#FFB900'
+              }
+            },
+            {
+              value: xData[2],
+              textStyle: {
+                fontSize: 12,
+                color: '#FD4B15'
+              }
+            }
+          ]
         },
         grid: {
           left: 10,
           right: 10,
-          bottom: 20,
-          top: 30,
+          bottom: 10,
+          top: 10,
           containLabel: true
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
+        // tooltip: {
+        //
+        // },
         yAxis: {
+          axisLabel : {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisLine:{
+            lineStyle:{
+              color:'rgba(89,170,247,.3)'
+            }
+          },
           axisTick: {
             show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
+          },
+          splitLine: {
+            show: false
+          },
+          splitNumber:3
         },
         series: [{
-          data: yData,
           type: 'bar',
+          barWidth:25,
+          data: [
+            {
+              name: xData[0],
+              value: yData[0],
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#01AEFE'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#635BE6' },
+                      { offset: 1, color: '#6DB7EF' }
+                    ]
+                  )
+                }
+              }
+            },
+            {
+              name: xData[1],
+              value: yData[1],
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#FFB700'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#F9B205' },
+                      { offset: 1, color: '#F2E34A' }
+                    ]
+                  )
+                }
+              }
+            },
+            {
+              name: xData[2],
+              value: yData[2],
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#FD4B15'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      { offset: 0, color: '#F36C00' },
+                      { offset: 1, color: '#F4C5A8' }
+                    ]
+                  )
+                }
+              }
+            }
+          ]
         }]
       })
     },
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el)
       this.setOptions(this.chartData)
     }
   }
@@ -2,7 +2,7 @@
   <div>
     <titlesection title="PDA"></titlesection>
     <totalsection :totalNum="totalVal"></totalsection>
-    <bar-chart :chart-data="lineChartData" class="flexfm"/>
+    <bar-chart :chart-data="barChartData" class="flexfm"/>
   </div>
 </template>
  
@@ -12,9 +12,9 @@ import totalsection from &#39;../components/total&#39;
 import barChart from '../components/barChart'
 import {fetchList} from '../api/api'
  
-const lineChartData = {
-  newVisitis: {
-    yData: [100, 120, 161],
+const barChartData = {
+  data: {
+    yData: [100, 80, 21],
     xData: ['正常', '异常', '故障']
   }
 }
@@ -29,7 +29,7 @@ export default {
   data() {
     return {
       totalVal: '213734',
-      lineChartData: lineChartData.newVisitis
+      barChartData: barChartData.data
     }
   },
   created() {