<!--
 * @FilePath: \wang-vue-worke:\demo\daping\src\views\demo\content.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-01-31 08:20:07
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
          <el-row :gutter="10">
          <el-col :span="6">
            <div class="content-L">
                <border1 :title="echartsData.chartBox1.title">
              <template v-slot>
                <div class="content-LR" ref="item1"></div>
              </template>
            </border1>
            <border1 :title="echartsData.chartBox2.title">
              <template v-slot>
                <div class="content-LR" ref="item2">8</div>
              </template>
            </border1>
            <border1 :title="echartsData.chartBox3.title">
              <template v-slot>
                <div class="content-LR gauge3" ref="item3">8</div>
              </template>
            </border1>
            </div>
          </el-col>
          <el-col :span="12">
            <!-- <border1 :title="resItem.title">
              <template v-slot>
                <div>16</div>
              </template>
            </border1> -->
            <div class="dv-9">
                <dv-border-box-9>dv-border-box-9</dv-border-box-9>
            </div>
            
          </el-col>
          <el-col :span="6">
            <border1 :title="resItem.title">
              <template v-slot>
                <div>8</div>
              </template>
            </border1>
          </el-col>
        </el-row>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import border1 from "@/components/borderBox/border1.vue";
import { ElRow, ElCol } from "element-plus";

import echarts from "@/utils/echarts";
import {EDataPerson,EDataPersonItem} from '@/type/demo'
const resItem = reactive({
  title: "图1",
  data: {
    value: "1111",
  },
});
let item1=ref()
let item2=ref()
let item3=ref()

const echartsData:EDataPerson = {
    chartBox1:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    chartBox2:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    chartBox3:{
        div:null,
        data:null,
        title:'',
        box:null
    },

}


const setData=()=>{
    echartsData.chartBox1.div=item1.value
    echartsData.chartBox2.div=item2.value
    echartsData.chartBox3.div=item3.value
    echartsData.chartBox1.data={
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
  echartsData.chartBox2.data={
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
echartsData.chartBox3.data={
  series: [{
      type: 'gauge',
      center: ['50%', '90%'],
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 60,
      splitNumber: 12,
      itemStyle: {
        color: '#FFAB91'
      },
      progress: {
        show: true,
        width: 15
      },

      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 15
        }
      },
      axisTick: {
        distance: -45,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -20,
        color: '#999',
        fontSize: 10
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '-15%'],
        fontSize: 20,
        fontWeight: 'bolder',
        formatter: '{value} °C',
        color: 'inherit'
      },
      data: [
        {
          value: 20
        }
      ]
    },

    {
      type: 'gauge',
      center: ['50%', '90%'],
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 60,
      itemStyle: {
        color: '#FD7347'
      },
      progress: {
        show: true,
        width: 8
      },

      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
};
  echartsData.chartBox1.title='柱状图'
  echartsData.chartBox2.title='折线图'
  echartsData.chartBox3.title='仪表盘'
  console.log(echartsData);
  
}

const { proxy } = getCurrentInstance() as any;
const change = (item:EDataPersonItem) => {
  let Ebox=proxy.$echarts.init(
    item.div,
    "dark"
  );
  Ebox.setOption(item.data);
  // item.box = Ebox
};
onMounted(() => {
    setData()
    // change(echartsData['chartBox1']);
    for(let key  in echartsData){
        change(echartsData[key]);
  }
//   

});

</script>

<style module>
 .container {
 }
</style>
<style scoped>
.content-LR{
    height: 150px;
    width:100%;
}
.dv-9{
    height:calc(100% - 50px);
    width:100%;
    padding-top: 50px;
}
</style>