k_online_ui/src/views/Dashboard/src/components/SellerChart.vue

<!-- 横形柱状图 -->
<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, reactive, watch, computed } from 'vue'
const props = defineProps({
  SellerData: Array,
  Interval: Object
})
const seller_data = ref(props.SellerData)
const seller_interval = ref(props.Interval)
const seller_ref = ref()
watch(
  () => props.SellerData,
  (current) => {
    seller_data.value = current
    initChart()
  },
  {
    deep: true
  }
)
watch(
  () => props.Interval,
  (current) => {
    seller_interval.value = current
    initOption.xAxis.max = Max.value
    initOption.xAxis.interval = interval.value
    initChart()
  },
  {
    deep: true
  }
)
// 最大值
const Max = computed(() => {
  return seller_interval.value?.Max
})
// 刻度
const interval = computed(() => {
  return seller_interval.value?.interval
})
// y轴值
const sellerName = computed(() => {
  return seller_data.value?.map((item: any) => {
    return item.name
  })
})
// 数额
const sellerValue = computed(() => {
  return seller_data.value?.map((item: any) => {
    return item.value
  })
})
// 获取数据中的color
const ColorValue = computed(() => {
  return seller_data.value?.map((item: any) => {
    return item.color
  })
})
const initOption = reactive({
  // 间距
  grid: {
    top: '5%',
    left: '3%',
    right: '6%',
    bottom: '5%',
    containLabel: true // 距离包含坐标轴上的文字
  },
  // hover时的文字显示
  tooltip: {
    show: true,
    backgroundColor: '#2b2f36',
    borderColor: '#2b2f36',
    formatter: function (params: any) {
      var str =
        params.name + '<div style= ' + 'color:#FFF>' + params.marker + params.value + '</div>'
      return str
    },
    textStyle: {
      color: '#FFF',
      fontWeight: 700,
      fontFamily: 'Lato-Light',
      fontSize: '14px'
    }
  },
  // X轴
  xAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    type: 'value',
    axisLine: {
      show: false
    },
    axisLabel: {
      fontFamily: 'Lato-Light',
      color: '#B5B9BF'
    },
    min: 0, // 最小值
    max: Max.value, // 最大值
    interval: interval.value // 刻度
  },
  // y轴
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontFamily: 'Lato-Light',
      color: '#B5B9BF'
    },
    type: 'category',
    data: sellerName,
    // 工具提示
    tooltip: {
      trigger: 'axis', // 触发类型，轴触发，axis为鼠标移到一条柱状图显示
      axisPointer: {
        type: 'line', // 默认为line，line为直线，cross为十字准星，shadow为阴影
        z: 0,
        lineStyle: {
          color: '#FFF'
        }
      }
    }
  },
  series: [
    {
      type: 'bar',
      data: sellerValue,
      itemStyle: {
        color: function (params: { dataIndex: number }) {
          return ColorValue.value[params.dataIndex % ColorValue.value.length]
        }
      },
      barCategoryGap: '0%', // 消除不同系列间的间隔
      // 设置柱形文字的样式
      label: {
        show: true,
        color: '#646A73',
        position: 'insideRight',
        fontFamily: 'Lato-Light',
        // 数据每三位加一个逗号
        formatter: function (data: { value: { toString: () => string } }) {
          const reg = /(\d)(?=(?:\d{3})+$)/g
          const newNumber = data.value.toString().replace(reg, '$1,')
          return newNumber
        }
      }
    }
  ]
})

onMounted(() => {
  initChart()
})

const initChart = () => {
  seller_data.value?.sort((a: any, b: any) => {
    return a.value - b.value // 从大到小排序
  })
  const seller_chart = echarts.init(seller_ref.value)
  seller_chart.setOption(initOption)
  //图表响应式
  window.addEventListener('resize', () => {
    seller_chart.resize()
  })
  // 监听点击事件
  seller_chart.on('click', function (params) {
    // params 包含了点击事件的数据
    console.log(params) // 获取点击的数据
  })
}
</script>

<template>
  <div class="com-container">
    <div ref="seller_ref" id="seller_chart"></div>
  </div>
</template>

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