daimp-front/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue

<template>
  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
</template>
<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  query: {
    type: String,
    default: '',
  },
});

let values = reactive([]);
const getValue = (dataList) => {
  let arr = [];
  for (let i = 0; i < dataList.length; i++) {
    arr.push(dataList[i].value);
  }
  return arr;
};

const state = reactive({
  data: [],
  option: {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      backgroundColor: 'rgba(0,0,0,0.6);',
      borderColor: '#35d0c0',
      borderRadius: 8,
      formatter: (data) => {
        const params = data[0];
        let str = `<div class="custom-echarts-tips" >
          <span>${params.name}</span><br/>
          <span>${params.marker} ${params.data} 万元</span>
        </div>`;
        return str;
      },
      extraCssText: 'backdrop-filter: blur(8px);',
    },
    barStyle: {
      barWidth: 14,
      itemStyle: {
        borderWidth: 14,
        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
      },
      color: {
        type: 'linear',
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: '#35D0C0' },
          { offset: 1, color: 'rgba(53,208,192,0)' },
        ],
        global: false,
      },
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#E5E5E5',
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#424242',
        },
      },
      show: false,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      {
        // 右侧数量
        type: 'category',
        inverse: true,
        offset: 10,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#ffffff',
            fontSize: '16',
          },
          formatter: function (value) {
            let str = '{title|' + value + '吨}';
            return str;
          },
          rich: {
            title: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
        data: [12000, 8000, 6000, 4000, 3500],
      },
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        zlevel: 1,
        barBorderRadius: 10,
        itemStyle: {
          borderRadius: [10, 10, 10, 10],
          color: 'rgba(100, 200, 255, 0.3)',
        },
        backgroundStyle: {
          color: 'rgba(100, 200, 255, 0.3)',
          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
        },
        barWidth: 20,
        data: values,
        label: {
          position: [0, -16],
          align: 'left',
          show: true,
          formatter: (params) => {
            return params.name;
          },
        },
        barMaxWidth: 40,
        markLine: {
          label: {
            color: '#26a69a',
          },
        },
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        data: [],
        barBorderRadius: 30,
        itemStyle: {
          normal: {
            color: 'rgba(105,131,242,.3)',
            borderRadius: 10,
          },
        },
        label: {
          show: false,
        },
        barMaxWidth: 40,
        markLine: {
          label: {
            color: '#26a69a',
          },
        },
      },
    ],
  },
});

watch(
  () => props.data,
  (val) => {
    if (!isEmpty(val)) {
      state.data = val;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(
  () => props.query,
  (val) => {
    if (!isEmpty(val)) {
      loadData(val);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const loadData = (val) => {
  if (val === 'all') {
    state.data = props.data;
    state.option.yAxis.data = ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'];
  } else {
    for (let i in props.data) {
      if (val === props.data[i].name) {
        state.data = [];
        state.data.push(props.data[i]);
        state.option.yAxis.data = [props.data[i].name];
      }
    }
  }
  values = getValue(state.data);
  console.log(val);
};
</script>