<template>
  <div class="dashboard-editor-container">
    <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;padding: 0 10px;">
      <h3 style="font-weight: 600;">数据总览</h3>
      <div style="background: #fff;">
        <el-tabs v-model="activeName" @tab-click="handleTabClick" type="card">
          <el-tab-pane label="本月" name="1"></el-tab-pane>
          <el-tab-pane label="本周" name="2"></el-tab-pane>
          <el-tab-pane label="累计" name="3"></el-tab-pane>
        </el-tabs>  
      </div>
    </div>
    <panel-group :topData="topAreaOptions"/>
    <el-row>
      <el-col :span="12">
        <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 id="lineChartOne" style="width: 100%;height: 300px;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 id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
        </div>
      </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;height: 32px;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">货品出/入库排名</div>
            <div>
              <el-radio-group v-model="type3" @change="changType3" size="mini">
                <el-radio-button :label="1">出库</el-radio-button>
                <el-radio-button :label="2">入库</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div id="lineChartThree" 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 id="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>
        </div>
      </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;height: 32px;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">供应商评分排名</div>
          </div>
          <div id="lineChartFive" 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 id="barChartSix" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>  
        </div> 
      </el-col>
    </el-row> 


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import * as echarts from 'echarts' 
import {  
          getIndexDataApi,
          supplierScorePageApi
       } from "@/api/foodManage/index";  
        
export default { 
  name: 'Index',
  components: {
    PanelGroup
  },
  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"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "入库货品数量",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "出库货品数量",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "入库总金额（元）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "出库总金额（元）",
          "lastDate": "2025-05-15"
        }
      ],
      allChartData:{},
      type1:1,
      type2:1,
      type3:1,
      activeName:'1',
      myCharts1:null,
      myCharts2:null,
      myCharts3:null,
      myCharts4:null,
      myCharts5:null,
      myCharts6:null,
    }
  },
  mounted(){ 
    this.getChartData()
    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();
          this.myCharts6.resize();
        }, 500);
      }
    },
    handleTabClick(){ 
      this.getChartData()
    },
    getChartData(){
      getIndexDataApi({type:this.activeName}).then((response) => {
        if(response.code==200){
          this.allChartData = response.data;
          this.topAreaOptions = [
            {
              "num": response.data.totalOrderAmount.thisNum||0,
              "rate": response.data.totalOrderAmount.percent+'',
              "name": "采购订单总额（元）"
            },{
              "num": response.data.totalOrderNum.thisNum||0,
              "rate": response.data.totalOrderNum.percent+'',
              "name": "采购订单数量（个）"
            },
            {
              "num": response.data.unFinshOrderNum.thisNum||0,
              "rate": response.data.unFinshOrderNum.percent+'',
              "name": "未验收完成采购订单数（个）"
            },
            {
              "num": response.data.totalOrderGoodsNum.thisNum||0,
              "rate": response.data.totalOrderGoodsNum.percent+'',
              "name": "采购订单货品总数"
            },
            {
              "num": response.data.storeNum.thisNum||0,
              "rate": response.data.storeNum.percent+'',
              "name": "入库货品数量"
            },
            {
              "num": response.data.outboundNum.thisNum||0,
              "rate": response.data.outboundNum.percent+'',
              "name": "出库货品数量"
            },
            {
              "num": response.data.storeAmount.thisNum||0,
              "rate": response.data.storeAmount.percent+'',
              "name": "入库总金额（元）"
            },
            {
              "num": response.data.outboundAmount.thisNum||0,
              "rate": response.data.outboundAmount.percent+'',
              "name": "出库总金额（元）"
            }
          ]; 
          this.InitEChartsOne()
          this.InitEChartsTwo()
          this.InitEChartsThree()
          this.InitEChartsFour()
          this.InitEChartsFive()
          this.InitEChartsSix()  
        }else{
          this.$modal.msgError("获取图表数据失败！");  
        } 
      }); 
    },
    InitEChartsOne() {
      let chartData=this.allChartData.orderSupplier;
      let xDate = []
      let salesData = [] 
      chartData.forEach((item,index)=>{ 
        xDate.push(item.name) 
        salesData.push(item.count) 
      })
      var option = {
        // title: {
        //   text: "食品经营情况", 
        // },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["销售额", "订单量"],
        //   icon:"rect",
        //   bottom: "0%",
        // },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#4FA7FF"], 
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xDate,
            axisLabel: {
              formatter: function (value, index) {
                value = value.length > 5 ? value.slice(0, 5) + '...' : value
                return value;
              },
            },
          },
        ],
        yAxis: {
          name: "订单量",
          type: "value",
        },
        series: [
          {
            name: "订单量",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(79, 167, 255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(79, 167, 255, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: {
              normal: { areaStyle: { type: "default" } },
            },
            data: salesData,
          }
        ],
      };
      this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
      this.myCharts1.setOption(option)    
    }, 
    InitEChartsTwo() {
      let chartData=this.allChartData.orderCanteen;  
      let xDate = [] 
      let orderData = []  
      chartData.forEach((item,index)=>{
        xDate.push(item.name) 
        orderData.push(item.count) 
      }) 
      var option = {
        // title: {
        //   text: "食品经营情况", 
        // },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["销售额", "订单量"],
        //   icon:"rect",
        //   bottom: "0%",
        // },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#58F5CE"], 
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xDate,
            axisLabel: {
              formatter: function (value, index) {
                value = value.length > 5 ? value.slice(0, 5) + '...' : value
                return value;
              },
            },
          },
        ],
        yAxis: {
          name: "订单量",
          type: "value",
        },
        series: [ 
          {
            name: "订单量",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(92, 255, 214, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(92, 255, 214, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: orderData,
          },
        ],
      };
      this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
      this.myCharts2.setOption(option)   
    },
    changType3(e){  
      this.InitEChartsThree()
      this.myCharts3.resize();
    },
    InitEChartsThree() { 
      var getName = [];
      var getValue = [];
      var chartData=[]  
      if(this.type3==1){//出库
        chartData = this.allChartData.outImsRanking
      }else{//入库
        chartData = this.allChartData.intoImsRanking
      } 
      chartData.forEach((item,index)=>{ 
        getName.push(item.name)
        getValue.push(item.count) 
      })  
      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: "2%",
          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: 80, 
            axisLabel: {
              show: true,
              align: "left",
              textStyle: {
                color: "#66cc00",
              },
              formatter: function (value, index) {
                var num = "";
                var str = "";
                var no = "NO.";
                num = index + 1;
                value = value.length > 5 ? value.slice(0, 5) + '...' : value
                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: -10,
            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: 20,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(0, 111, 104, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(0, 111, 104, 1)",
                  },
                ]),
              },
            },
            barWidth: 12,
            data: getValue,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 12,
            barGap: "-100%",
            data: getMax,
            itemStyle: {
              normal: {
                color: "rgba(224, 233, 255, 1)",
                barBorderRadius: 20,
              },
            },
          },
        ],
      }; 
      this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
      this.myCharts3.setOption(option)  
      // // 根据页面大小自动响应图表大小
      // window.addEventListener("resize3", function () {
      //     myCharts3.resize();
      // }); 
    },
    InitEChartsFour() {
      var chartData=this.allChartData.acceptanceProportion
      var m2R2Data = []
      var sumNum = 0
      chartData.forEach((item,index)=>{
        let obj = {}
        sumNum=sumNum+item.count
        if(index==0){
          obj = {
            value: item.count,
            legendname: item.name,
            name: item.name+' '+  item.count,
            itemStyle: { color: "#5085f2" },
          }
        } 
        if(index==1){
          obj = {
            value: item.count,
            legendname: item.name,
            name: item.name+' '+  item.count,
            itemStyle: { color: "#fdb301" },
          }
        }
        m2R2Data.push(obj)
      })   
      var option = {
        title: [
          {
            text: "订单总数",
            subtext: sumNum + "个",
            textStyle: {
              fontSize: 20,
              color: "black",
            },
            subtextStyle: {
              fontSize: 20,
              color: "black",
            },
            textAlign: "center",
            x: "34.5%",
            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",
          orient: "vertical",
          left: "70%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C",
          },
          height: 250,
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["35%", "50%"],
            radius: ["60%", "80%"],
            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.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
      this.myCharts4.setOption(option)
    },
    //供应商排名接口-单独开发
    InitEChartsFive() { 
      var getName = [];
      var getValue = [];
      var chartData=[]
      supplierScorePageApi({"pageNum": 1,"pageSize": 10}).then((response) => {
          chartData = response.rows.slice(0, 10);
          chartData.forEach((item,index)=>{
            getName.push(item.supplierName)
            getValue.push(item.totalScore) 
          })  
          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: "2%",
              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: 90, 
                axisLabel: {
                  show: true,
                  align: "left", 
                  textStyle: {
                    color: "#66cc00",
                  },
                  formatter: function (value, index) {
                    var num = "";
                    var str = "";
                    var no = "NO.";
                    num = index + 1;
                    value = value.length > 5 ? value.slice(0, 5) + '...' : value
                    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: -10,
                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: 20,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgb(0, 111, 104, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(0, 111, 104, 1)",
                      },
                    ]),
                  },
                },
                barWidth: 12,
                data: getValue,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 12,
                barGap: "-100%",
                data: getMax,
                itemStyle: {
                  normal: {
                    color: "rgba(224, 233, 255, 1)",
                    barBorderRadius: 20,
                  },
                },
              },
            ],
          }; 
          this.myCharts5 = echarts.init(document.querySelector('#lineChartFive'));
          this.myCharts5.setOption(option)  
          // // 根据页面大小自动响应图表大小
          // window.addEventListener("resize3", function () {
          //     myCharts3.resize();
          // });
      }); 
    }, 
    InitEChartsSix() {
      var chartData=this.allChartData.inventoryProportion 
      var m2R2Data = []
      var sumNum = 0
      chartData.forEach((item,index)=>{
        let obj = {}
        sumNum=sumNum+item.count
        if(index==0){
          obj = {
            value: item.count,
            legendname: item.name,
            name: item.name+' '+  item.count,
            itemStyle: { color: "#5085f2" },
          }
        }
        if(index==1){
          obj = {
            value: item.count,
            legendname: item.name,
            name: item.name+' '+  item.count,
            itemStyle: { color: "#f2719a" },
          }
        }
        if(index==2){
          obj = {
            value: item.count,
            legendname: item.name,
            name: item.name+' '+  item.count,
            itemStyle: { color: "#fdb301" },
          }
        }
        m2R2Data.push(obj)
      })
      var option = {
        title: [
          {
            text: "库存总数",
            subtext: sumNum + "个",
            textStyle: {
              fontSize: 20,
              color: "black",
            },
            subtextStyle: {
              fontSize: 20,
              color: "black",
            },
            textAlign: "center",
            x: "34.5%",
            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",
          orient: "vertical",
          left: "70%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C",
          },
          height: 250,
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["35%", "50%"],
            radius: ["60%", "80%"],
            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.myCharts6 = echarts.init(document.querySelector('#barChartSix'));
      this.myCharts6.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header{
  margin: 0;
}

.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>
