UI样式修改能源&班组

src/views/energy/analysis/qoqAnalysis/components/lineChart.vue

@@ -15,7 +15,7 @@ export default {
     return {
       chartDom: '',
       chart: '',
-      chartHeight: this.tableHeight(350)
+      chartHeight: this.tableHeight(370)
     }
   },
   props: {
@@ -34,7 +34,7 @@ export default {
   },
   mounted() {
     window.addEventListener('resize', () => {
-      this.chartHeight = this.tableHeight(350)
+      this.chartHeight = this.tableHeight(370)
     })
   },
   methods: {
@@ -86,17 +86,35 @@ export default {
         }
       }
       var option = {
-        // title: {
-        //   text: 'World Population'
-        // },
         color:['#288AFF','#8EF0AB'],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
+          },
+          formatter: function(params) {
+            return (
+              params[0].axisValue + 
+              `<br>` +
+              params.map((item) => {
+                let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
+                let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
+						let value = item.value ? item.value : '-'
+						let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
+						return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
+									<span>${str}${seriesNameStr}</span>
+									<span>${valueStr}</span>
+								</span>`
+              }).join(``)
+            )
           }
         },
-        legend: {},
+        legend: {
+          right: '1%',
+          icon: 'rect',
+          itemHeight: 8,
+          itemWidth: 8
+        },
         grid: {
           left: '1%',
           right: '1%',