ui测试修改

src/views/databoard/components/NumRateChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <NotMsg v-show="notMsg"/>
-    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
+    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
   </div>
 </template>
 <script>
@@ -53,7 +53,7 @@ export default {
       this.productline && this.productline.length > 0 && this.productline.map(item => {
         xData.push(item.lineName)
         outputNum.push(item.outputNum)
-        passRate.push(item.passRate*100)
+        passRate.push(item.passRate?item.passRate*100:null)
       })
       if (
         this.chart !== null &&
@@ -64,7 +64,7 @@ export default {
       }
       this.chart = echarts.init(document.getElementById('numRateChart'));
       var option = {
-        grid: { top: 32, right: 60, bottom: 20, left: 60 },
+        grid: { top: 82, right: 60, bottom: 20, left: 60 },
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -73,7 +73,15 @@ export default {
           className: "num-rate-chart-tooltip"
         },
         legend: {
-          data: ['产线产量', '良品率'],
+          itemWidth:10,
+          itemHeight:10,
+          top: '2.5%',
+					right: '20px',
+          icon: 'rect',
+          data: [
+            {name:'产线产量',itemStyle:{color:'#364BFE'}},
+            {name:'良品率',itemStyle:{color:'#FFCB59'}}
+          ],
           textStyle: {
             color: "#DFF1FE",
             fontSize: 12,
@@ -136,7 +144,10 @@ export default {
             axisLabel: {
               color: "#fff",
               fontSize: 12,
-              formatter: '{value} %'
+              formatter: () =>{
+                console.log(value)
+                return value ? '{value} %': '-'
+              }
             },
           axisLine: {
             show: true,
@@ -160,7 +171,7 @@ export default {
                 return value;
               }
             },
-            barWidth: 12,
+            barWidth: 20,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: '#5CB7FF' },
@@ -175,7 +186,7 @@ export default {
             yAxisIndex: 1,
             tooltip: {
               valueFormatter: function (value) {
-                return value + '%';
+                return value?value + '%':'-';
               }
             },
             itemStyle: {
@@ -191,6 +202,8 @@ export default {
             lineStyle: {
                 width: 1
             },
+            symbol: 'circle',
+					  symbolSize: 5,
             data: passRate
           }
         ]
@@ -204,6 +217,7 @@ export default {
 .num-rate-chart {
 	width: 100%;
 	height: 100%;
+  top: -50px;
 }
 </style>
 <style>