aiot-app/pages/home/components/TabMain.vue

<template>
  <view class="">
    <view class="tab-title">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        v-text="item"
        :class="index === pickTabIndex ? 'active' : ''"
        @click="changeChartsTab(index)"
      ></view>
    </view>
    <view class="charts">
      <canvas
        class="charts-box"
        canvas-id="canvasA"
        id="canvasA"
        :class="pickTabIndex === 0 ? 'z99' : ''"
        @touchstart="e => canvasFn(e, 'canvasA')"
      ></canvas>
      <canvas
        class="charts-box"
        canvas-id="canvasB"
        id="canvasB"
        :class="pickTabIndex === 1 ? 'z99' : ''"
        @touchstart="e => canvasFn(e, 'canvasB')"
      ></canvas>
    </view>
  </view>
</template>

<script>
import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts-2.js'
let uChartsInstance = {}
export default {
  name: 'TabMain',
  props: {
    tabList: {
      type: Array,
      default: false
    }
  },
  data () {
    return {
      pickTabIndex: 0,
      cWidth: 750,
      cHeight: 400
    }
  },
  mounted () {
    this.cWidth = uni.upx2px(750)
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(400)
    let resA = {
      categories: ['1', '2', '3', '4', '5', '6', '7'],
      series: [
        {
          name: '日产量',
          color: '#488bff',
          data: [845, 224, 345, 485, 556, 235, 742]
        }
      ]
    }

    let resB = {
      categories: ['1', '2', '3', '4', '5', '6', '7'],
      series: [
        {
          name: '不良率',
          color: '#488bff',
          data: [300, 224, 345, 235, 556, 235, 556]
        }
      ]
    }
    this.showDraw('canvasA', resA)
    this.showDraw('canvasB', resB)
  },
  methods: {
    changeChartsTab (index) {
      this.pickTabIndex = index
    },
    showDraw (id, data) {
      const ctx = uni.createCanvasContext(id, this)
      const newuCharts = new uCharts({
        type: 'column',
        context: ctx,
        //canvasId: id,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: '#FFFFFF',
        padding: [15, 15, 0, 5],
        touchMoveLimit: 24,
        legend: {
          show: false
        },
        dataLabel: false,
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 4
        },
        yAxis: {
          splitNumber: 3,
          gridColor: '#eee',
          data: [
            {
              min: 0,
              max: 900,
              axisLine: false
            }
          ]
        },
        extra: {
          column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08
          }
        }
      })
      this.$set(uChartsInstance, id, newuCharts)
    },
    canvasFn (e, name) {
      uChartsInstance[name].showToolTip(e, {
        format: function (item, category) {
          return item.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  padding: 0 160rpx;
  display: flex;
  height: 82rpx;
  line-height: 82rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }
  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }
}

.charts {
  position: relative;
  width: 750rpx;
  height: 400rpx;
  .charts-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
  }
  canvas {
    width: 750rpx;
    height: 400rpx;
    background-color: #ffffff;
  }
  .z99 {
    z-index: 99;
  }
}
</style>