bigdata_WX/pages/cbd/components/pestEchart.vue

<template>
  <view class="pest-echart">
    <view class="pest-echart__header">
      <view class="tab-list">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <view class="pest-echart__content">
      <!-- 三个关键时期 -->
      <view class="period-section">
        <view class="period-item">
          <view class="period-label">始见期</view>
          <view class="period-value">{{ periodData.firstDate }}</view>
        </view>
        <view class="period-item">
          <view class="period-label">高峰期</view>
          <view class="period-value">{{ periodData.peakDate }}</view>
        </view>
        <view class="period-item">
          <view class="period-label">终见期</view>
          <view class="period-value">{{ periodData.lastDate }}</view>
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="chart-container">
        <canvas
          canvas-id="pestChart"
          id="pestChart"
          class="chart-canvas"
          @touchstart="touchStart"
          @touchmove="touchMove"
          @touchend="touchEnd"
        />
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '@/components/js_sdk/u-charts/u-charts/u-charts.js';

let chartInstance = null;

export default {
  name: 'PestEchart',
  data() {
    return {
      tabs: [
        { name: '叶蝉', id: 'yechan' },
        { name: '水龟虫', id: 'shuigui' },
        { name: '稻飞虱', id: 'daofeishi' },
        { name: '蝼蛄', id: 'lougou' },
        { name: '叶蝉', id: 'yechan' },
        { name: '蝼蛄', id: 'lougou' },
        { name: '叶蝉', id: 'yechan' },
        { name: '蝼蛄', id: 'lougou' },
        { name: '叶蝉', id: 'yechan' },
        { name: '甜菜', id: 'tiancai' }
      ],
      activeTab: 0,
      // 三个关键时期数据
      periodData: {
        firstDate: '2025-05-24',
        peakDate: '2025-06-24',
        lastDate: '2025-07-24'
      },
      chartData: {
        categories: ['05-29/00:00', '05-29/00:00', '05-29/00:00'],
        series: [
          {
            name: '虫量',
            data: [3, 7, 9]
          }
        ]
      },
      cWidth: 320,
      cHeight: 200,
      // 每个标签对应的数据
      tabData: [
        {
          periodData: {
            firstDate: '2025-05-24',
            peakDate: '2025-06-24',
            lastDate: '2025-07-24'
          },
          chartData: {
            categories: ['05-29/00:00', '05-29/00:00', '05-29/00:00'],
            series: [
              {
                name: '虫量',
                data: [3, 7, 9]
              }
            ]
          }
        },
        {
          periodData: {
            firstDate: '2025-06-01',
            peakDate: '2025-07-01',
            lastDate: '2025-08-01'
          },
          chartData: {
            categories: ['06-05', '06-12', '06-19', '06-26', '07-03', '07-10', '07-17', '07-24', '07-31'],
            series: [
              {
                name: '虫量',
                data: [1, 3, 6, 10, 12, 8, 5, 3, 2]
              }
            ]
          }
        },
        {
          periodData: {
            firstDate: '2025-05-15',
            peakDate: '2025-06-15',
            lastDate: '2025-07-15'
          },
          chartData: {
            categories: ['05-20', '05-27', '06-03', '06-10', '06-17', '06-24', '07-01', '07-08', '07-15'],
            series: [
              {
                name: '虫量',
                data: [3, 5, 7, 9, 11, 8, 6, 4, 2]
              }
            ]
          }
        },
        {
          periodData: {
            firstDate: '2025-05-20',
            peakDate: '2025-06-20',
            lastDate: '2025-07-20'
          },
          chartData: {
            categories: ['05-25', '06-01', '06-08', '06-15', '06-22', '06-29', '07-06', '07-13', '07-20'],
            series: [
              {
                name: '虫量',
                data: [1, 2, 5, 8, 10, 7, 5, 3, 1]
              }
            ]
          }
        },
        {
          periodData: {
            firstDate: '2025-06-05',
            peakDate: '2025-07-05',
            lastDate: '2025-08-05'
          },
          chartData: {
            categories: ['06-10', '06-17', '06-24', '07-01', '07-08', '07-15', '07-22', '07-29', '08-05'],
            series: [
              {
                name: '虫量',
                data: [2, 4, 6, 9, 12, 10, 7, 4, 2]
              }
            ]
          }
        }
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.cWidth = uni.upx2px(680);
      this.cHeight = uni.upx2px(400);
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    drawChart() {
      const ctx = uni.createCanvasContext('pestChart', this);

      chartInstance = new uCharts({
        type: 'line',
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: this.chartData.categories,
        series: this.chartData.series,
        animation: true,
        background: '#FFFFFF',
        color: ['#0085FF'],
        padding: [10, 20, 10, 0],
        dataLabel: false,
        dataPointShape: true,
        enableScroll: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true,
          boundaryGap: 'center',
          fontSize: 11,
          fontColor: '#999999',
          scrollShow: false
        },
        yAxis: {
          gridType: 'none',
          splitNumber: 4,
          min: 0,
          max: 12,
          fontSize: 11,
          fontColor: '#999999'
        },
        extra: {
          line: {
            type: 'curve',
            width: 2,
            activeType: 'hollow',
            linearType: 'none',
            onShadow: false,
            shadowColor: 'rgba(0, 133, 255, 0.3)',
            tension: 0.4
          }
        }
      });
    },
    switchTab(index) {
      this.activeTab = index;
      // 更新数据
      this.periodData = this.tabData[index].periodData;
      this.chartData = this.tabData[index].chartData;
      // 重新绘制图表
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    touchStart(e) {
      if (chartInstance) {
        chartInstance.scrollStart(e);
      }
    },
    touchMove(e) {
      if (chartInstance) {
        chartInstance.scroll(e);
      }
    },
    touchEnd(e) {
      if (chartInstance) {
        chartInstance.scrollEnd(e);
        chartInstance.showToolTip(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pest-echart {
  overflow: hidden;
  margin-top: 24rpx;
}

.pest-echart__header {
  padding-top: 24rpx;
}

.tab-list {
  width: 100%;
  padding-bottom: 24rpx;
  overflow-x: scroll;
  white-space: nowrap;
  overflow-y: hidden;
  box-sizing: border-box;
  // 去掉滚动条
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tab-item {
  margin-right: 16rpx;
  font-size: 28rpx;
  font-family: 'Source Han Sans CN VF', sans-serif;
  font-weight: 500;
  color: #999999;
  display: inline-block;
  box-sizing: border-box;
  background: #ffffff;
  font-family: "Source Han Sans CN VF";
  font-size: 28rpx;
  padding: 10rpx 32rpx;
  border-radius: 8rpx;
  &:last-child {
    margin-right: 0;
  }
  &.active {
    color: #0BBC58;
    font-weight: 700;
  }
  &:first-child.active {
    color: #0BBC58;
  }
}

.pest-echart__content {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 0 32rpx 32rpx;
}

.period-section {
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 12rpx;
}

.period-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.period-label {
  font-size: 28rpx;
  color: #303133;
  font-family: 'Source Han Sans CN VF', sans-serif;
  font-weight: 700;
  margin-bottom: 8rpx;
}

.period-value {
  font-size: 24rpx;
  color: #999999;
  font-family: 'Source Han Sans CN VF', sans-serif;
  font-weight: 400;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.chart-canvas {
  width: 100%;
  height: 100%;
}
</style>