<template>
  <div class="dealer-distribution-charts">
    <custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
const chartsData = reactive({
  option: {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '2%',
      top: '18%',
      containLabel: true,
    },
    title: {
      text: ' ',
      textStyle: {
        color: '#333',
      },
    },
    label: {
      color: '#333',
    },
    tooltip: {
      backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
      borderColor: '#2cf4fd', // 边框颜色
      borderWidth: 1, // 边框宽度
      textStyle: {
        color: '#fff', // 文字颜色
        fontSize: 12,
      },
      formatter: '{b}：{c}',
    },
    barStyle: {
      barWidth: 15,
      itemStyle: {
        borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
      },
      color: {
        type: 'linear', // 线性渐变
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#45bfe9' },
          { offset: 1, color: '#01589c' },
        ],
        global: false, // 默认为 false
      },
    },
    legend: {
      show: false,
    },
  },
  valData: [
    { value: 80, type: '经销商', name: '耿马镇' },
    { value: 105, type: '经销商', name: '勐撒镇' },
    { value: 100, type: '经销商', name: '勐永镇' },
    { value: 125, type: '经销商', name: '孟定镇' },
    { value: 217, type: '经销商', name: '勐简乡' },
    { value: 200, type: '经销商', name: '贺派乡' },
    { value: 155, type: '经销商', name: '四排山乡' },
    { value: 80, type: '经销商', name: '芒洪乡' },
    { value: 105, type: '经销商', name: '大兴乡' },
  ],
});
</script>
<style lang="scss" scoped>
.dealer-distribution-charts {
  height: 100%;
}
</style>
