<!--
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-08 09:18:08
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-17 14:00:46
 * @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-bar.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import { http } from "@/api/request";



const state = reactive({
  chartData: {
    legend: ['注册用户年度分布'],
    colors: [$c.bll4, $c.aql4, $c.ipl3, $c.cbl3,],
  },
  chartOption: {}
})

const processData = (dataList) => {
  let legend = state.chartData.legend,
    colors = state.chartData.colors,
    processedData = []
  legend.forEach((item, i) => {
    processedData.push({
      name: legend[i],
      type: 'bar',
      barWidth: 10,
      label: {
        show: false,
        position: 'insideRight'
      },
      itemStyle: {
        color: colors[i],
        borderRadius: 5
      },
      data: dataList?.map((item) => {
        return item.value;
      })
    })
  })
  state.chartOption.series = processedData;
  state.chartOption.xAxis.data = dataList?.map(it => it.label);
  state.chartOption.legend.data = legend;
  state.chartOption.legend.show = false;

}

const processOption = (dataList) => {
  console.log(0);
  state.chartOption = {
    update: true,
    // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      show: true,
      data: [],
      top: 0,
      right: 10,
    },
    // toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
    grid: {
      left: '16px',
      right: '16px',
      bottom: '5%',
      top: "25%",
      containLabel: true
    },
    yAxis: {
      type: 'value',
      splitNumber: 3,
      axisLabel: { align: 'right' },
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: { align: 'center' },
    },
    series: []
  }
  processData(dataList)
}

onMounted(() => {
  //processOption();

  http("POST", "/index/statistics/register", {}).then((res) => {
    processOption(res?.data?.dataList);
  })
})
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
