运营驾驶舱对接

src/views/home/components/heatBarChart.vue

@@ -15,10 +15,6 @@ export default {
     lineData: {
       type: Object,
       default: () => ({}),
-    },
-    xData: {
-      type: Array,
-      default: () => []
     }
   },
   mounted() {
@@ -32,7 +28,6 @@ export default {
     // 深度监听数据变化，仅更新图表配置（不销毁实例）
     lineData: {
       handler() {
-        console.log(this.lineData,'lineData');
         this.updateChart();
       },
       deep: true,
@@ -52,8 +47,12 @@ export default {
       }
 
       this.myChart = echarts.init(chartDom);
+      const entries = Object.entries(this.lineData);
+      entries.sort((item1, item2) => item2[1] - item1[1]);
+      const sortedObj = Object.fromEntries(entries);
+      let xData = Object.keys(sortedObj);
+      let yData = Object.values(sortedObj);
 
-      console.log('linedaata',this.lineData)
 
       const option = {
         tooltip: {
@@ -86,7 +85,7 @@ export default {
               interval: 0,
               padding: [5, 0, 0, 0]
             },
-            data:this.xData
+            data:xData
           }
         ],
         yAxis: [
@@ -112,7 +111,31 @@ export default {
             splitNumber: 4
           },
         ],
-        series: []
+        series: [
+          {
+            name: '实际',
+            type: 'bar',
+            yAxisIndex: 0,
+            barWidth: 40,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle: {
+              color:{
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+                ]
+              },
+              borderRadius: [4, 4, 0, 0],
+              borderWidth: 0
+            },
+            data: yData
+          }
+        ]
       };
 
       option && this.myChart.setOption(option);