<template>
  <div class="dashboard-editor-container"> 
    <panel-group :topData="topAreaOptions"/>
    <el-row>
        <el-col :span="18">
            <sub-group :topData="subTopAreaOptions"/>

        </el-col>
        <el-col :span="6">
          <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">设备状态数据分析</div>
            </div>
            <div style="display: flex;flex-direction: row-reverse;">
              <el-date-picker
                  v-model="dateRange1"
                  type="daterange"
                  align="right"
                  size="mini"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd" style="width: 220px"
                  :picker-options="pickerOptions" @change="changDate1">
              </el-date-picker>
            </div>
            <div id="barChartOne" style="width: 100%;height: 350px;margin-bottom: 20px;"></div>  
          </div>
          <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">留样数据分析</div>
            </div>
            <div style="display: flex;flex-direction: row-reverse;">
              <el-date-picker
                  v-model="dateRange2"
                  type="daterange"
                  align="right"
                  size="mini"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd" style="width: 220px"
                  :picker-options="pickerOptions" @change="changDate2">
              </el-date-picker>
            </div>
            <div id="barChartTwo" style="width: 100%;height: 350px;margin-bottom: 20px;"></div>  
          </div>
        </el-col>
    </el-row>
    <el-row>
       <el-col :span="8">
          <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;height: 24px;">报警数据分析</div> 
            <div style="width: 100%;text-align: center;position: relative;">
              <span>员工违规</span>
              <span style="position: absolute;right: 10px;font-size: 14px;color: #00D9CB;">查看详情></span>
            </div> 
            <div id="lineChartThree" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
          </div>
       </el-col>
       <el-col :span="8">
          <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
            <div style="width: 100%;text-align: center;position: relative;margin-top: 24px;">
              <span>员工违规</span>
              <span style="position: absolute;right: 10px;font-size: 14px;color: #FFBD57;">查看详情></span>
            </div>  
            <div id="lineChartFour" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
          </div>
       </el-col>
       <el-col :span="8">
          <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
            <div style="width: 100%;text-align: center;position: relative;margin-top: 24px;">
              <span>环境告警</span>
              <span style="position: absolute;right: 10px;font-size: 14px;color: #F35C5C;">查看详情></span>
            </div>  
            <div id="lineChartFive" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
          </div>
       </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import SubGroup from './dashboard/SubGroup'
import * as echarts from 'echarts' 
import {  getThisMonthSDishSalesRankingApi,
          getProportionOfOrderTypesApi 
        } from "@/api/index";
import {  getHomePageInfoApi } from "@/api/kitchen/index";
export default { 
  name: 'Index',
  components: {
    PanelGroup,
    SubGroup
  },
  data() {
    return {
      topAreaOptions:[
        {
          "num": 0,
          "rate": "0.00",
          "name": "人员总数",
          "lastDate": "2025-05-15"
        },{
          "num": 0,
          "rate": "0.00",
          "name": "设备总数（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日预警数（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.00",
          "name": "历史预警数（个）",
          "lastDate": "2025-05-15"
        }
      ],
      subTopAreaOptions:{  
          "num1": 1, 
          "num2": 2, 
          "num3": 3, 
          "num4": 4, 
        },
      dateRange1:[new Date(),new Date()],
      dateRange2:[new Date(),new Date()],
      pickerOptions: {
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
            const start = new Date();
            const end = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
            picker.$emit('pick', [start, end]);
            }
        },{
            text: '最近一个月',
            onClick(picker) {
            const start = new Date();
            const end = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
            }
        },{
            text: '最近三个月',
            onClick(picker) {
            const start = new Date();
            const end = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
            picker.$emit('pick', [start, end]);
            }
        }]
      },
      myCharts1:null,
      myCharts2:null,
      myCharts3:null,
      myCharts4:null,
      myCharts5:null,
    }
  },
  mounted(){
    this.getTopData()
    this.InitEChartsOne()
    this.InitEChartsTwo()
    this.InitEChartsThree()
    this.InitEChartsFour()
    this.InitEChartsFive()
    window.addEventListener('transitionend', this.$_sidebarResizeHandler) 
  },
  methods: {
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        console.log(e)
        setTimeout(() => {
          this.myCharts1.resize();
          this.myCharts2.resize();
          this.myCharts3.resize();
          this.myCharts4.resize();
          this.myCharts5.resize();
        }, 500);
      }
    },
    getTopData(){ 
      getHomePageInfoApi({}).then((response) => {
          // this.topAreaOptions = response.data.data; 
      }); 
    },
    changDate1(){ 
      this.InitEChartsOne()
      this.myCharts1.resize();
    },
    InitEChartsOne() {
      console.log(this.dateRange1)
      console.log(this.formatDate(this.dateRange1[0]))
      var chartData=[]
      // getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
          // chartData = response.data;
          var m2R2Data = []
          var sumNum = 0
          // chartData.forEach((item,index)=>{
          //   let obj = {}
          //   sumNum=sumNum+item.num
          //   if(index==0){
          //     obj = {
          //       value: item.num,
          //       legendname: item.name,
          //       name: item.name+' '+  item.num,
          //       itemStyle: { color: "#5085f2" },
          //     }
          //   }
          //   if(index==1){
          //     obj = {
          //       value: item.num,
          //       legendname: item.name,
          //       name: item.name+' '+  item.num,
          //       itemStyle: { color: "#f2719a" },
          //     }
          //   }
          //   if(index==2){
          //     obj = {
          //       value: item.num,
          //       legendname: item.name,
          //       name: item.name+' '+  item.num,
          //       itemStyle: { color: "#fdb301" },
          //     }
          //   }
          //   m2R2Data.push(obj)
          // }) 

          var m2R2Data = [
            {
              value: 240,
              legendname: "正常",
              name: "正常  240",
              itemStyle: { color: "#69ADF8" },
            },
            {
              value: 120,
              legendname: "离线",
              name: "离线  120",
              itemStyle: { color: "#F3A56D" },
            }
          ];

          var option = {
            title: [
              {
                text: sumNum + "个",
                subtext: "设备总数",
                textStyle: {
                  fontSize: 22,
                  color: "black",
                },
                subtextStyle: {
                  fontSize: 14,
                  color: "black",
                },
                textAlign: "center",
                x: "48%",
                y: "44%",
              },
            ],
            tooltip: {
              trigger: "item",
              formatter: function (parms) {
                var str =
                  parms.seriesName +
                  "</br>" +
                  parms.marker +
                  "" +
                  parms.data.legendname +
                  "</br>" +
                  "数量：" +
                  parms.data.value +
                  "</br>" +
                  "占比：" +
                  parms.percent +
                  "%";
                return str;
              },
            },
            legend: {
              type: "scroll", 
              align: "left",
              bottom: "2%",
              let:"middle",
              textStyle: {
                color: "#8C8C8C",
              },
              height: 50,
              width:300,
              formatter: function (name) {
                let data = option.series[0].data; 
                let total = 0;
                let tarValue;
                for (let i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    tarValue = data[i].value;
                  }
                }
                let v = tarValue;
                let p = Math.round((tarValue / total) * 100); //占比
                return `${name} (${p}%)`;
              }
            },
            series: [
              {
                name: "标题",
                type: "pie",
                center: ["50%", "50%"],
                // radius: ["55%", "75%"],
                radius: [90, 120],
                clockwise: false, //饼图的扇区是否是顺时针排布
                avoidLabelOverlap: false,
                roseType: "radius",
                label: {
                  normal: {
                    show: false,
                    position: "outter",
                    formatter: function (parms) {
                      return parms.data.legendname;
                    },
                  },
                },
                labelLine: {
                  normal: {
                    length: 5,
                    length2: 3,
                    smooth: true,
                  },
                },
                data: m2R2Data,
              },
            ],
          }; 
          this.myCharts1 = echarts.init(document.querySelector('#barChartOne'));
          this.myCharts1.setOption(option)  
          // 根据页面大小自动响应图表大小
          // window.addEventListener("resize4", function () {
          //     myCharts1.resize();
          // });
      // });
    },
    changDate2(){
      this.InitEChartsTwo()
      this.myCharts2.resize();
    },
    InitEChartsTwo() {
      console.log(this.dateRange2)
       var chartData=[]
      // getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
          // chartData = response.data;
          var m2R2Data = []
          var sumNum = 0
          // chartData.forEach((item,index)=>{
          //   let obj = {}
          //   sumNum=sumNum+item.num
          //   if(index==0){
          //     obj = {
          //       value: item.num,
          //       legendname: item.name,
          //       name: item.name+' '+  item.num,
          //       itemStyle: { color: "#5085f2" },
          //     }
          //   }
          //   if(index==1){
          //     obj = {
          //       value: item.num,
          //       legendname: item.name,
          //       name: item.name+' '+  item.num,
          //       itemStyle: { color: "#f2719a" },
          //     }
          //   }
          //   if(index==2){
          //     obj = {
          //       value: item.num,
          //       legendname: item.name,
          //       name: item.name+' '+  item.num,
          //       itemStyle: { color: "#fdb301" },
          //     }
          //   }
          //   m2R2Data.push(obj)
          // }) 

          var m2R2Data = [
            {
              value: 310,
              legendname: "合格",
              name: "合格  310",
              itemStyle: { color: "#5085f2" },
            },
            {
              value: 335,
              legendname: "不合格",
              name: "不合格  335",
              itemStyle: { color: "#fdb301" },
            }
          ];

          var option = {
            title: [
              {
                text: "留样总数",
                subtext: sumNum + "个",
                textStyle: {
                  fontSize: 20,
                  color: "black",
                },
                subtextStyle: {
                  fontSize: 20,
                  color: "black",
                },
                textAlign: "center",
                x: "48%",
                y: "44%",
              },
            ],
            tooltip: {
              trigger: "item",
              formatter: function (parms) {
                var str =
                  parms.seriesName +
                  "</br>" +
                  parms.marker +
                  "" +
                  parms.data.legendname +
                  "</br>" +
                  "数量：" +
                  parms.data.value +
                  "</br>" +
                  "占比：" +
                  parms.percent +
                  "%";
                return str;
              },
            },
            legend: {
              type: "scroll", 
              align: "left",
              bottom: "2%",
              let:"middle",
              textStyle: {
                color: "#8C8C8C",
              },
              height: 50,
              width:300,
              formatter: function (name) {
                let data = option.series[0].data; 
                let total = 0;
                let tarValue;
                for (let i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    tarValue = data[i].value;
                  }
                }
                let v = tarValue;
                let p = Math.round((tarValue / total) * 100); //占比
                return `${name} (${p}%)`;
              }
            },
            series: [
              {
                name: "标题",
                type: "pie",
                center: ["50%", "50%"],
                radius: ["55%", "75%"],
                clockwise: false, //饼图的扇区是否是顺时针排布
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: "outter",
                    formatter: function (parms) {
                      return parms.data.legendname;
                    },
                  },
                },
                 
                labelLine: {
                  normal: {
                    length: 5,
                    length2: 3,
                    smooth: true,
                  },
                },
                data: m2R2Data,
              },
            ],
          }; 
          this.myCharts2 = echarts.init(document.querySelector('#barChartTwo'));
          this.myCharts2.setOption(option)  
          // 根据页面大小自动响应图表大小
          // window.addEventListener("resize4", function () {
          //     myCharts2.resize();
          // });
      // });
    },
    InitEChartsThree() { 
      var getName = [];
      var getValue = [];
      var chartData=[]
      getThisMonthSDishSalesRankingApi().then((response) => {
          chartData = response.data;
          chartData.forEach((item,index)=>{
            getName.push(item.name)
            getValue.push(item.num) 
          })  
          var max = Math.max.apply(null, getValue);
          var getMax = [];
          for (var i = 0; i < getName.length; i++) {
            getMax.push(max+20);
          } 
          var option = {
            backgroundColor: "#fff",
            grid: {
              left: "10%",
              right: "2%",
              bottom: "2%",
              top: "10%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              formatter: function (params) {
                return params[0].name + " : " + params[0].value;
              },
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                offset: 100, 
                axisLabel: {
                  show: true,
                  align: "left",
                  textStyle: {
                    color: "#66cc00",
                  },
                  formatter: function (value, index) {
                    var num = "";
                    var str = "";
                    var no = "NO.";
                    num = index + 1;
                    if (index === 0) {
                      str = " {num1|" + num + "} {title1|" + value + "}";
                    } else if (index === 1) {
                      str = " {num2|" + num + "} {title2|" + value + "}";
                    } else if (index === 2) {
                      str = " {num3|" + num + "} {title3|" + value + "}";
                    } else {
                      str = " {num|" + num + "} {title|" + value + "}";
                    }
                    return str;
                  },
                  rich: {
                    no: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no1: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no2: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no3: {
                      color: "#333",
                      fontSize: 14,
                    },
                    num: {
                      color: "#fff",
                      backgroundColor: "#5281F8",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num1: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num2: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num3: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    title: {
                      color: "#333333",
                    },
                    title1: {
                      color: "#333333",
                    },
                    title2: {
                      color: "#333333",
                    },
                    title3: {
                      color: "#333333",
                    },
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                data: getName,
              },
              {
                type: "category",
                inverse: true,
                offset: -50,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                  interval: 0,
                  color: "#666",
                  align: "left",
                  margin: 20,
                  fontSize: 13,
                  formatter: function (value, index) {
                    return (
                      getValue[index]
                    );
                  },
                },
                data: getValue,
              },
            ],
            series: [
              {
                name: "值",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                  normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgb(0, 217, 203, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(0, 217, 203, 1)",
                      },
                    ]),
                  },
                },
                barWidth: 14,
                data: getValue,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 14,
                barGap: "-100%",
                data: getMax,
                itemStyle: {
                  normal: {
                    color: "rgba(242, 252, 250, 1)",
                    barBorderRadius: 30,
                  },
                },
              },
            ],
          };   
          this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
          this.myCharts3.setOption(option)  
          // // 根据页面大小自动响应图表大小
          // window.addEventListener("resize3", function () {
          //     myCharts3.resize();
          // });
      }); 
    }, 
    InitEChartsFour() {
      var getName = [];
      var getValue = [];
      var chartData=[]
      getThisMonthSDishSalesRankingApi().then((response) => {
          chartData = response.data;
          chartData.forEach((item,index)=>{
            getName.push(item.name)
            getValue.push(item.num) 
          })  
          var max = Math.max.apply(null, getValue);
          var getMax = [];
          for (var i = 0; i < getName.length; i++) {
            getMax.push(max+20);
          } 
          var option = {
            backgroundColor: "#fff",
            grid: {
              left: "10%",
              right: "2%",
              bottom: "2%",
              top: "10%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              formatter: function (params) {
                return params[0].name + " : " + params[0].value;
              },
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                offset: 100, 
                axisLabel: {
                  show: true,
                  align: "left",
                  textStyle: {
                    color: "#66cc00",
                  },
                  formatter: function (value, index) {
                    var num = "";
                    var str = "";
                    var no = "NO.";
                    num = index + 1;
                    if (index === 0) {
                      str = " {num1|" + num + "} {title1|" + value + "}";
                    } else if (index === 1) {
                      str = " {num2|" + num + "} {title2|" + value + "}";
                    } else if (index === 2) {
                      str = " {num3|" + num + "} {title3|" + value + "}";
                    } else {
                      str = " {num|" + num + "} {title|" + value + "}";
                    }
                    return str;
                  },
                  rich: {
                    no: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no1: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no2: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no3: {
                      color: "#333",
                      fontSize: 14,
                    },
                    num: {
                      color: "#fff",
                      backgroundColor: "#5281F8",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num1: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num2: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num3: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    title: {
                      color: "#333333",
                    },
                    title1: {
                      color: "#333333",
                    },
                    title2: {
                      color: "#333333",
                    },
                    title3: {
                      color: "#333333",
                    },
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                data: getName,
              },
              {
                type: "category",
                inverse: true,
                offset: -50,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                  interval: 0,
                  color: "#666",
                  align: "left",
                  margin: 20,
                  fontSize: 13,
                  formatter: function (value, index) {
                    return (
                      getValue[index]
                    );
                  },
                },
                data: getValue,
              },
            ],
            series: [
              {
                name: "值",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                  normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgb(255, 179, 63, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(255, 179, 63, 1)",
                      },
                    ]),
                  },
                },
                barWidth: 14,
                data: getValue,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 14,
                barGap: "-100%",
                data: getMax,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 247, 234, 1)",
                    barBorderRadius: 30,
                  },
                },
              },
            ],
          }; 
          this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
          this.myCharts4.setOption(option)  
          // // 根据页面大小自动响应图表大小
          // window.addEventListener("resize3", function () {
          //     myCharts4.resize();
          // });
      }); 
    },
    InitEChartsFive() {
      var getName = [];
      var getValue = [];
      var chartData=[]
      getThisMonthSDishSalesRankingApi().then((response) => {
          chartData = response.data;
          chartData.forEach((item,index)=>{
            getName.push(item.name)
            getValue.push(item.num) 
          })  
          var max = Math.max.apply(null, getValue);
          var getMax = [];
          for (var i = 0; i < getName.length; i++) {
            getMax.push(max+20);
          } 
          var option = {
            backgroundColor: "#fff",
            grid: {
              left: "10%",
              right: "2%",
              bottom: "2%",
              top: "10%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              formatter: function (params) {
                return params[0].name + " : " + params[0].value;
              },
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                offset: 100, 
                axisLabel: {
                  show: true,
                  align: "left",
                  textStyle: {
                    color: "#66cc00",
                  },
                  formatter: function (value, index) {
                    var num = "";
                    var str = "";
                    var no = "NO.";
                    num = index + 1;
                    if (index === 0) {
                      str = " {num1|" + num + "} {title1|" + value + "}";
                    } else if (index === 1) {
                      str = " {num2|" + num + "} {title2|" + value + "}";
                    } else if (index === 2) {
                      str = " {num3|" + num + "} {title3|" + value + "}";
                    } else {
                      str = " {num|" + num + "} {title|" + value + "}";
                    }
                    return str;
                  },
                  rich: {
                    no: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no1: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no2: {
                      color: "#333",
                      fontSize: 14,
                    },
                    no3: {
                      color: "#333",
                      fontSize: 14,
                    },
                    num: {
                      color: "#fff",
                      backgroundColor: "#5281F8",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num1: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num2: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    num3: {
                      color: "#fff",
                      backgroundColor: "#EDA54F",
                      width: 20,
                      height: 20,
                      fontSize: 14,
                      align: "center",
                      borderRadius: 100,
                    },
                    title: {
                      color: "#333333",
                    },
                    title1: {
                      color: "#333333",
                    },
                    title2: {
                      color: "#333333",
                    },
                    title3: {
                      color: "#333333",
                    },
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                data: getName,
              },
              {
                type: "category",
                inverse: true,
                offset: -50,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                  interval: 0,
                  color: "#666",
                  align: "left",
                  margin: 20,
                  fontSize: 13,
                  formatter: function (value, index) {
                    return (
                      getValue[index]
                    );
                  },
                },
                data: getValue,
              },
            ],
            series: [
              {
                name: "值",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                  normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgb(255, 97, 97, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(255, 97, 97, 1)",
                      },
                    ]),
                  },
                },
                barWidth: 14,
                data: getValue,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 14,
                barGap: "-100%",
                data: getMax,
                itemStyle: {
                  normal: {
                    color: "rgba(255, 238, 238, 1)",
                    barBorderRadius: 30,
                  },
                },
              },
            ],
          }; 
          this.myCharts5 = echarts.init(document.querySelector('#lineChartFive'));
          this.myCharts5.setOption(option)  
          // // 根据页面大小自动响应图表大小
          // window.addEventListener("resize3", function () {
          //     myCharts5.resize();
          // });
      }); 
    },

    //日期
    formatDate(date) {
        // 格式化为 YYYY-MM-DD
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    } 
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
