daimp-front/new-digital-agriculture-screen/src/views/trace/components/codeNumCharts.vue

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

const dataList = reactive([
  {
    name: '其他',
    value: 3500,
  },
  {
    name: '烟叶',
    value: 4000,
  },
  {
    name: '甘蔗',
    value: 6000,
  },
  {
    name: '核桃',
    value: 8000,
  },
  {
    name: '茶叶',
    value: 12000,
  },
]);

let titles = reactive([]);
let values = reactive([]);
const max = Math.max(...dataList);
const maxData = dataList.map((item, index) => {
  return {
    value: [max, index],
    name: titles[index],
  };
});
const barData = dataList.map((item, index) => {
  return {
    value: [item, index],
    name: titles[index],
  };
});

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

onMounted(() => {
  titles = getName();
  values = getValue();
  console.log(titles);
  console.log(values);
});

const state = reactive({
  option: {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '10%',
      containLabel: true,
    },
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      className: 'custom-tooltip-container', // 自定义父容器类名
      backgroundColor: 'rgba(0,0,0,0.5)',
      borderColor: '#35d0c0',
      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;
      },
    },
    barStyle: {
      barWidth: 14,
      showBackground: true,
      itemStyle: {
        borderWidth: 14,
        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
      },
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(1,254,253,0)' },
          { offset: 1, color: '#01fefd' },
        ],
        global: false,
      },
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#eee',
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#ffffff',
        },
      },
      show: false,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        // 左侧title
        type: 'category',
        data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
        axisLabel: {
          textStyle: {
            color: '#ffffff',
            fontSize: '16',
          },
        },
        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: maxData,
        barBorderRadius: 30,
        itemStyle: {
          normal: {
            color: 'rgba(105,131,242,.3)',
            borderRadius: 10,
          },
        },
        label: {
          show: false,
        },
        barMaxWidth: 40,
        markLine: {
          label: {
            color: '#26a69a',
          },
        },
      },
      {
        name: '内圆',
        type: 'scatter',
        hoverAnimation: false,
        data: barData,
        yAxisIndex: 0,
        symbolSize: 22,
        itemStyle: {
          normal: {
            color: '#26a69a',
            opacity: 1,
          },
        },
        zlevel: 2,
        label: {
          show: false,
        },
      },
      {
        name: '外圆',
        type: 'scatter',
        hoverAnimation: false,
        data: barData,
        yAxisIndex: 0,
        symbolSize: 28,
        symbol: `path://M512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-268.8a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z`,
        itemStyle: {
          color: 'rgb(255, 255, 255)',
          opacity: 1,
          borderColor: 'rgba(44, 111, 226, 0.2)',
          borderWidth: 2,
        },
        zlevel: 3,
        label: {
          show: false,
        },
      },
    ],
  },
});
</script>