前端

fuintAdmin/src/views/indexcomponents/bottom_z.vue

@@ -15,7 +15,7 @@
           </el-radio-group>
         </div>
       </div>
-      <div v-loading="Loading" id="chart" style="width: 100%; height: 400px;"></div>
+      <div v-loading="Loading" id="chart" style="width: 100%; height: 400px;background: linear-gradient( 360deg, #E7F1F8 0%, #FFFFFF 100%);"></div>
     </div>
 
   </div>
@@ -55,7 +55,7 @@ export default {
           let series =  { type: 'bar',  barCategoryGap: '40%' }
           this.rowData.push(series)
         }
-        this.initChart()
+        // this.initChart()
         this.Loading = false
 
       })
@@ -66,36 +66,57 @@ export default {
       const chart = echarts.init(document.getElementById('chart'))
 
       const option = {
-        color: [
+        color: ['#0080FF', '#15D6B1', '#FF9655'],
-          '#77A8F9',
-          '#86E1BB',
-          '#8195F5',
-          '#d48265',
-          '#91c7ae',
-          '#749f83',
-          '#ca8622',
-          '#bda29a',
-          '#6e7074',
-          '#546570',
-          '#c4ccd3'
-        ],
         legend: {},
         tooltip: {},
         dataset: {
-          source: this.data
+          source: [
+            ['product', '92#', '95#', '98#'],
+            ['2024年第20周', 43.3, 85.8, 93.7],
+            ['2024年第21周', 83.1, 73.4, 55.1],
+            ['2024年第22周', 86.4, 65.2, 82.5],
+            ['2024年第23周', 72.4, 53.9, 39.1],
+            ['2024年第24周', 72.4, 53.9, 39.1]
+          ]
         },
         xAxis: { type: 'category' },
         yAxis: {},
-        series:[{
+        series: [
-          data:this.rowData,
+          {
-          type: 'bar',
+            type: 'bar',
-          itemStyle: {
+            barWidth: 18,
-            borderRadius: [10, 10, 0, 0] // 设置第一项和第二项的圆角为10，第三项和第四项的圆角为0
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 0, 0]
+              }
+            }
+          },
+          {
+            type: 'bar',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 0, 0]
+              }
+            }
+          },
+          {
+            type: 'bar',
+            barWidth: 18,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 0, 0]
+              }
+            }
           }
-        }
+        ],
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '3%',
+          containLabel: true
+        },
 
-
-        ]
       };
 
       chart.setOption(option)