<script setup>
import { http } from "@/api/request";

const state = reactive({
  chartData: {
    colors: [$c.bll5, $c.inl3, $c.aql3, $c.yel3, $c.orl3, $c.rel3, $c.aql1, $c.yel5],
  },
  chartOption: {}
})






const processOption = (dataList) => {

  let train = dataList?.map(it => it.trainName),
    school = dataList?.map(it => it.schoolName),
    values = dataList?.map(it => it.count);


  state.chartOption = {
    update:true,
    grid: {
      left: '16px',
      right: '42px',
      bottom: '0',
      top: '2%',
      containLabel: true
    },
    xAxis: [{
      show: false,
    },
    {
      show: false,
    }
    ],
    yAxis: {
      type: 'category',
      inverse: true,
      nameGap: 16,
      axisLine: {
        show: false,

      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
        margin: 20,
        textStyle: {
          color: '#d1e6eb',

        },
      },
      data: [1,2,3,4]
    },

    series: [

      //亮色条 百分比
      {
        show: true,
        type: 'bar',
        barGap: '-100%',
        barWidth: 10,
        z: 2,
        silent: true,
        itemStyle: {
          barBorderRadius: 10,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#275266' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#68D6DE' // 100% 处的颜色
            }]
          }
        },
        data: values,
      },
      {
        name: '外框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: 'rgba(255,255,255,0.1)' //rgba设置透明度0.14
          }
        },
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#DEDEDE',
              fontSize: 14,
              lineHeight: -20
            },
            position: ['90%', -20],
            formatter: function (data) {
              return '访问' + "{blue|" + (values[data.dataIndex]) + "}" + '次';
            },
            rich: {
              blue: {
                fontSize: 14,
                lineHeight: 5,
                color: '#62E6F6',
              }
            }
          }
        },
        barGap: '-100%',
        z: 0,
        barWidth: 10,
        data: values?.map(it=>{
          return Math.max(...values)
        })
      },
      //年份
      {
        show: true,
        type: 'bar',
        xAxisIndex: 1, //代表使用第二个X轴刻度
        barGap: '-100%',
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: 'transparent',
          }
        },
        label: {
          normal: {
            show: true,
            position: [0, '-20'],
            textStyle: {
              fontSize: 14,
              color: '#fff',
              lineHeight: -20
            },
            formatter: function (data) {
              var result = ''
              result += train[data.dataIndex] + "{mr|" + "学校：" + "}" + "{blue|" + school[data.dataIndex] + "}";
              return result
            },
            rich: {
              blue: {
                fontSize: 14,
                lineHeight: 5,
                color: '#62E6F6'
              },
              mr: {
                padding: [0, 0, 0, 10],
                fontSize: 14,
                color: '#fff'
              }
            }
          }
        },
        data: values
      }
    ]
  }
}

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

  http("POST", "/index/statistics/trainVisit", {}).then((res) => {
    let result = res?.data?.dataList;
    processOption(result);
  });
});
</script>
<template>
  <div style="margin-top: 24px;height: 100%;width:100%">
    <echartsInit :chartOption="state.chartOption"></echartsInit>

  </div>
</template>
<style lang="less">
</style>
