<template>
  <div class="out_echart">

<mapLine></mapLine>

    <!-- <div class="echart_row_1">
      <div class="echart_cell">
        <lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList"
          :FeatureList="lineComProps.FeatureList" :xAxisData="lineComProps.xAxisData"
          :seriesMultipleFlag="lineComProps.seriesMultipleFlag" :seriseMultipleName="lineComProps.seriseMultipleName"
          :seriseMultipleData="lineComProps.seriseMultipleData" :xAxisProps="lineComProps.xAxisProps"
          :formatCallBack="lineComProps.formatCallBack"></lineCom>
        <barCom :domId="3" :title="barComPropsHorizontal.title" :xAxisProps="barComPropsHorizontal.xAxisProps"
          :xAxisData="barComPropsHorizontal.xAxisData" :yAxisData="barComPropsHorizontal.yAxisData"
          :yAxisProps="barComPropsHorizontal.yAxisProps" :seriseData="barComPropsHorizontal.seriseData"
          :emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle" :itemStyle="barComPropsHorizontal.itemStyle"
          :stackFlag="barComPropsHorizontal.stackFlag" :stackLabel="barComPropsHorizontal.stackLabel"
          :borderRadius="barComPropsHorizontal.borderRadius" :formatCallBack="barComPropsHorizontal.formatCallBack">
        </barCom>
      </div>
      <div class="echart_cell">
        <mapEcharts></mapEcharts>
      </div>
    </div>
    <div class="echart_row2">
      <div class="echart_cell">
        <barCom :domId="1" :title="barComProps.title" :xAxisData="barComProps.xAxisData"
          :yAxisProps="barComProps.yAxisProps" :seriseData="barComProps.seriseData"
          :emphasisItemStyle="barComProps.emphasisItemStyle" :itemStyle="barComProps.itemStyle"
          :stackFlag="barComProps.stackFlag" :stackLabel="barComProps.stackLabel" :borderRadius="barComProps.borderRadius"
          :formatCallBack="barComProps.formatCallBack"></barCom>
      </div>
      <div class="echart_cell">
        <barCom :domId="2" :title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData"
          :yAxisProps="barComPropsSimple.yAxisProps" :seriseData="barComPropsSimple.seriseData"
          :emphasisItemStyle="barComPropsSimple.emphasisItemStyle" :itemStyle="barComPropsSimple.itemStyle"
          :stackFlag="barComPropsSimple.stackFlag" :stackLabel="barComPropsSimple.stackLabel"
          :borderRadius="barComPropsSimple.borderRadius" :formatCallBack="barComPropsSimple.formatCallBack"></barCom>


      </div>
    </div>
    <div class="echart_row3">
      <div class="echart_cell">
        <Pie3dCom></Pie3dCom>
      </div>
      <div class="echart_cell">
        <hotProvider></hotProvider>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
// import lineCom from "../../components/echartsCom/lineCom.vue"
import mapEcharts from "../../components/echartsCom/mapEcharts.vue"
import barCom from "../../components/echartsCom/barCom.vue"
import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
import hotProvider from "../../components/customCom/hotProvider.vue"
import mapLine from "components/mapBaidu/mapLine.vue"













const lineComProps = reactive({
  title: "折线图",
  legendDataList: ["Email"],//, "Union Ads", "Video Ads", "Direct", "Search Engine"
  FeatureList: ["saveAsImage"],//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']    
  xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  seriesMultipleFlag: true,
  seriseMultipleName: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
  seriseMultipleData: [
    [120, 132, 101, 134, 90, 230, 210],
    [220, 182, 191, 234, 290, 330, 310],
    [150, 232, 201, 154, 190, 330, 410],
    [320, 332, 301, 334, 390, 330, 320],
    [820, 932, 901, 934, 1290, 1330, 1320]
  ],
  seriseSingleName: 'Email',
  seriseSingleData: [220, 182, 191, 234, 290, 330, 310],
  xAxisProps: {
    type: "category",
    boundaryGap: false,
    name: 'x轴'
  },
  color: [],
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})

const barComProps = reactive({
  title: "柱状图",
  xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
  yAxisProps: {
    type: "value",
    splitLine: {//是否显示 y轴横线
      show: false
    },
    show: false
  },
  seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
  itemStyle: [//柱状图的默认颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.5, color: '#188df0' },
    { offset: 1, color: '#188df0' }
  ],
  emphasisItemStyle: [//柱状图的高亮颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.7, color: '#2378f7' },
    { offset: 1, color: '#83bff6' }
  ],
  stackFlag: true,//柱状图是否显示每个柱条的数量
  stackLabel: {
    show: true,
    position: 'top',
    color: "#f00"
  },
  borderRadius: 0,
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})

const barComPropsSimple = reactive({
  title: "柱状图",
  xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
  yAxisProps: {
    type: "value",
    splitLine: {//是否显示 y轴横线
      show: true
    },
    show: true
  },
  seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
  itemStyle: "#188df0",
  emphasisItemStyle: '#f00',
  // emphasisItemStyle: [//柱状图的高亮颜色 渐变
  //   { offset: 0, color: '#f00' },
  //   { offset: 0.7, color: '#2378f7' },
  //   { offset: 1, color: '#83bff6' }
  // ],
  stackFlag: false,//柱状图是否显示每个柱条的数量
  stackLabel: {
    show: false,
  },
  borderRadius: 10,
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})

const barComPropsHorizontal = reactive({
  title: "柱状图-横向",
  xAxisProps: {
    type: "value",
    boundaryGap: [0, 0.01]
  },
  xAxisData: [],
  yAxisProps: {
    type: "category",
    // boundaryGap: false,
  },
  yAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
  seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
  itemStyle: [//柱状图的默认颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.5, color: '#188df0' },
    { offset: 1, color: '#188df0' }
  ],
  emphasisItemStyle: [//柱状图的高亮颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.7, color: '#2378f7' },
    { offset: 1, color: '#83bff6' }
  ],
  stackFlag: false,//柱状图是否显示每个柱条的数量
  stackLabel: {
    show: false,
  },
  borderRadius: 10,
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})


</script>

<style>
.out_echart {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.echart_row_1,
.echart_row2,
.echart_row3 {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.echart_cell {
  flex: 1;
  border: 2px solid black;

}
</style>