daimp-front/sub-operation-service/src/views/smartFarm/components/bugData.vue

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { getAssetsFile } from '@/utils/index.js';
import * as echarts from 'echarts';

// 图表 DOM 引用
const chartRef2 = ref(null);
// ECharts 实例
let chartInstance = null;
// 颜色列表
const colorList = ['#3685FE', '#FFD500', '#25BF82', '#FE4066'];
// x轴数据
const xData = ['1月', '2月', '3月', '4月', '5月', '6月'];

/* --------------- methods --------------- */
// #region
// 图表配置
const option = {
  backgroundColor: '#fff',
  title: {
    text: '',
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
    },
    left: 'center',
    top: '5%',
  },
  legend: {
    icon: 'circle',
    top: '5%',
    right: '5%',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#556677',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true,
        backgroundColor: '#fff',
        color: '#556677',
        borderColor: 'rgba(0,0,0,0)',
        shadowColor: 'rgba(0,0,0,0)',
        shadowOffsetY: 0,
      },
      lineStyle: {
        width: 0,
      },
    },
    backgroundColor: '#fff',
    textStyle: {
      color: '#5c6c7c',
    },
    padding: [10, 10],
    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
  },
  grid: {
    top: '20%',
  },
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#999',
        },
        margin: 15,
      },
      axisPointer: {
        label: {
          padding: [11, 5, 7],
          backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#fff',
              },
              {
                offset: 0.9,
                color: '#fff',
              },
              {
                offset: 0.9,
                color: '#33c0cd',
              },
              {
                offset: 1,
                color: '#33c0cd',
              },
            ],
            global: false,
          },
        },
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: 'value',
      show: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '蝗虫',
      type: 'line',
      data: [235, 852, 1208, 1988, 1657, 643],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#3685FE',
        shadowColor: 'rgba(158,135,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[0],
        borderColor: colorList[0],
      },
    },
    {
      name: '飞蛾',
      type: 'line',
      data: [1124, 1055, 1654, 1764, 922, 55],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#FFD500',
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[1],
        borderColor: colorList[1],
      },
    },
    {
      name: '毛虫',
      type: 'line',
      data: [1245, 618, 1468, 1814, 2175],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#25BF82',
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[2],
        borderColor: colorList[2],
      },
    },
    {
      name: '其他昆虫',
      type: 'line',
      data: [1673, 1732, 783, 179, 963, 2068],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#FE4066',
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[3],
        borderColor: colorList[3],
      },
    },
  ],
};
const initChart = () => {
  if (chartRef2.value) {
    // 基于准备好的dom，初始化echarts实例
    chartInstance = echarts.init(chartRef2.value);
    // 绘制图表
    chartInstance.setOption(option);
    // 自动显示最大值点的tooltip
    // showMaxValueTooltip();
    // 响应式调整
    window.addEventListener('resize', resizeChart);
    setTimeout(() => chartInstance.resize(), 10);
  }
};
// 组件挂载时初始化图表
onMounted(() => {
  initChart();
});
// 组件卸载前销毁图表
onBeforeUnmount(() => {
  if (chartInstance) {
    window.removeEventListener('resize', resizeChart);
    chartInstance.dispose();
    chartInstance = null;
  }
});
// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
</script>

<template>
  <div style="width: 100%; min-height: 210px">
    <div ref="chartRef2" style="width: 100%; height: 210px; margin-top: 20px"></div>
  </div>
</template>

<style scoped lang="scss"></style>