<!-- 竖形柱状图 -->
<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, reactive, watch, computed } from 'vue'
const props = defineProps({
  BarData: Object,
  barHeight: Object
})
const bar_data = ref(props.BarData)
const bar_ref = ref()
watch(
  () => props.BarData,
  (current) => {
    bar_data.value = current
    initOption.title.text = bar_title.value
    initOption.xAxis.data = barName.value
    initOption.series = bar_series.value
    initOption.legend.data = Name.value
    initOption.yAxis.max = Max.value
    initOption.yAxis.interval = interval.value
    initChart()
  },
  {
    deep: true
  }
)
// 最大值
const Max = computed(() => {
  return bar_data.value?.Max
})
// 刻度
const interval = computed(() => {
  return bar_data.value?.interval
})
// x轴值
const barName = computed(() => {
  return bar_data.value?.barList
})
// title
const bar_title = computed(() => {
  return bar_data.value?.bar_title
})
// series
const bar_series = computed(() => {
  return bar_data.value?.barSeries
})
// legend标题
const Name = computed(() => {
  if (bar_data.value?.barSeries) {
    return bar_data.value?.barSeries.map((item: any) => {
      return item.name
    })
  } else {
    return []
  }
})
// 数额
const initOption = reactive({
  //标题
  title: {
    text: bar_title.value || '', //主标题
    left: 19,
    top: 9.5,
    textStyle: {
      color: '#2B2F36',
      rich: {
        a: {
          fontWeight: '700',
          fontFamily: 'Lato-Light',
          fontSize: '14px'
        },
        b: {
          fontWeight: '400',
          fontFamily: 'Lato-Light',
          fontSize: '12px'
        }
      }
    }
  },
  // 间距
  grid: {
    top: '18%',
    left: '1%',
    right: '6%',
    bottom: '5%',
    containLabel: true // 距离包含坐标轴上的文字
  },
  // hover时的文字显示
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: '#2b2f36',
    borderColor: '#2b2f36',
    formatter: function (params: any) {
      let str: any = ''
      let allnum: any = 0
      params.forEach((item: any) => {
        allnum += item.value
        str +=
          '<div style= ' +
          'color:#FFF>' +
          item.marker +
          item.seriesName +
          ': ' +
          item.value.toLocaleString() +
          '</div>'
      })
      str +=
        '<div style= ' +
        'color:#FFF;font-family: Lato-Light>Total: ' +
        allnum.toLocaleString() +
        '</div>'
      return str
    },
    textStyle: {
      color: '#FFF',
      fontWeight: 700,
      fontFamily: 'Lato-Light',
      fontSize: '14px'
    }
  },
  xAxis: {
    type: 'category',
    data: barName.value,
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#eaebed'
      }
    },
    axisLabel: {
      interval: 0,
      fontFamily: 'Lato-Light',
      color: '#B5B9BF'
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#eaebed'
      }
    },
    axisLabel: {
      fontFamily: 'Lato-Light',
      color: '#B5B9BF'
    },
    min: 0, // 最小值
    max: Max.value, // 最大值
    interval: interval.value // 刻度
  },
  series: bar_series.value,
  legend: {
    data: Name.value,
    top: '3%',
    itemGap: 30,
    left: '40%',
    itemHeight: 8.5, //修改icon图形大小
    itemWidth: 8.5, //修改icon图形大小
    textStyle: {
      fontSize: 12,
      fontFamily: 'Lato-Light',
      color: '#646A73'
    }
  }
})
onMounted(() => {
  initChart()
})

const initChart = () => {
  const bar_chart = echarts.init(bar_ref.value)
  bar_chart.setOption(initOption)
  //图表响应式
  window.addEventListener('resize', () => {
    bar_chart.resize()
  })
  // 监听点击事件
  bar_chart.on('click', function (params) {
    // params 包含了点击事件的数据
    console.log('1111', params) // 获取点击的数据
  })
}
</script>

<template>
  <div class="com-container">
    <div ref="bar_ref" id="bar_chart" :style="props.barHeight"></div>
  </div>
</template>

<style lang="scss" scoped>
.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#bar_chart {
  width: 100%;
}
</style>
