daimp-front/new-digital-agriculture-screen/src/views/inputs/components/inputsFive.vue

<template>
  <custom-echart-line :chart-data="chartData" :option="chartOption" height="100%" />
</template>

<script setup>
import { ref } from 'vue';

// 1. 数据生成（12个月完整数据）
const chartData = ref(
  (() => {
    // 定义波动参数
    const waveConfig = {
      // [月份索引]: 调整系数 (1.0为基础值)
      peaks: { 3: 1.6, 9: 1.5 }, // 4月和10月高峰 (数组索引从0开始)
      valleys: { 0: 0.7, 6: 0.8, 11: 0.6 }, // 1月、7月、12月低谷
    };

    // 生成符合波动要求的数据
    const generateWaveData = (baseVal) => {
      return Array.from({ length: 12 }, (_, i) => {
        if (waveConfig.peaks[i]) return baseVal * waveConfig.peaks[i];
        if (waveConfig.valleys[i]) return baseVal * waveConfig.valleys[i];
        // 平滑过渡值（在基础值附近波动）
        return baseVal * (0.9 + Math.random() * 0.2);
      }).map((v) => parseFloat(v.toFixed(1)));
    };

    // 各品类基础值
    return [
      { type: '种子', values: generateWaveData(1) },
      { type: '化肥', values: generateWaveData(20) },
      { type: '农药', values: generateWaveData(2) },
    ].flatMap(({ type, values }) =>
      values.map((value, i) => ({
        type,
        name: `${i + 1}月`,
        value,
      }))
    );
  })()
);
function hexToRGBA(hex, alpha = 1) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

// 2. 图表配置
const chartOption = ref({
  color: ['#02FD94', '#FEF906', '#01FEFD'],
  legend: {
    data: ['种子', '化肥', '农药'],
    top: 8,
    itemWidth: 12, // 矩形宽度
    itemHeight: 12, // 矩形高度
    icon: 'rect',
    itemGap: 20,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    backgroundColor: 'rgba(0,0,0,0.5);',
    borderColor: '#35d0c0',
    borderRadius: 8,
    formatter: (params) => `
      <div style="font-weight:bold;margin-bottom:5px;color:#fff">${params[0].name}</div>
      ${params
        .map(
          (p) => `
        <div style="display:flex;align-items:center;margin:3px 0;color:#fff">
          <span style="display:inline-block;width:8px;height:8px;background:${p.color};margin-right:6px;color:#fff"></span>
          ${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
        </div>
      `
        )
        .join('')}
    `,
    extraCssText: 'backdrop-filter: blur(8px);',
  },
  grid: {
    left: '3%',
    right: '5%',
    bottom: '5%',
    top: '20%',
    containLabel: true,
  },
  yAxis: {
    type: 'value',
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      interval: 0,
      margin: 15,
      align: 'center',
    },
    axisTick: {
      show: false, // 隐藏刻度线
    },
  },
  series: [
    {
      name: '种子',
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 2,
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: hexToRGBA('#02FD94', 0) },
            { offset: 0.2, color: hexToRGBA('#02FD94', 1) },
            { offset: 0.8, color: hexToRGBA('#02FD94', 1) },
            { offset: 1, color: hexToRGBA('#02FD94', 0) },
          ],
        },
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: hexToRGBA('#02FD94', 1) }, // 底部较实
            { offset: 1, color: hexToRGBA('#02FD94', 0) }, // 顶部较透明
          ],
        },
      },

      emphasis: {
        focus: 'series',
      },
    },
    {
      name: '化肥',
      type: 'line',
      smooth: true,
      symbol: 'none', // 关键配置：隐藏数据点标记
      lineStyle: {
        width: 2,
        color: {
          // 线条首尾渐淡
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: hexToRGBA('#E0A21C', 0) },
            { offset: 0.2, color: hexToRGBA('#E0A21C', 1) },
            { offset: 0.8, color: hexToRGBA('#E0A21C', 1) },
            { offset: 1, color: hexToRGBA('#E0A21C', 0) },
          ],
        },
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: hexToRGBA('#FEF906', 1) },
            { offset: 1, color: hexToRGBA('#FEF906', 0) },
          ],
        },
      },

      emphasis: {
        focus: 'series',
      },
    },
    {
      name: '农药',
      type: 'line',
      smooth: true,
      symbol: 'none', // 关键配置：隐藏数据点标记
      lineStyle: {
        width: 2,
        color: {
          // 线条首尾渐淡
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: hexToRGBA('#01FEFD', 0) },
            { offset: 0.2, color: hexToRGBA('#01FEFD', 1) },
            { offset: 0.8, color: hexToRGBA('#01FEFD', 1) },
            { offset: 1, color: hexToRGBA('#01FEFD', 0) },
          ],
        },
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: hexToRGBA('#01FEFD', 1) },
            { offset: 1, color: hexToRGBA('#01FEFD', 0) },
          ],
        },
      },

      emphasis: {
        focus: 'series',
      },
    },
    // 其他系列同理...
  ],
});
</script>

<style scoped>
/* 调整倾斜月份标签的间距 */
:deep(.echarts-axis-x .echarts-axis-tick) {
  margin-top: 10px;
}
</style>