crm-mobile/pages/home/components/chartFunnel.vue

<template>
  <home-section
    :title="title"
    :options="dropOptions"
    @status="handleToggleStatus">
    <view class="chart-body">
      <view class="chart-core">
        <!--#ifdef MP-ALIPAY -->
        <canvas
          id="funnelChart"
          canvas-id="funnelChart"
          class="charts"
          :width="cWidth*pixelRatio"
          :height="cHeight*pixelRatio"
          :style="{'width':cWidth+'px','height':cHeight+'px'}"
          @touchstart="touchPie($event, 'funnelChart')" />
        <!--#endif-->
        <!--#ifndef MP-ALIPAY -->
        <canvas
          id="funnelChart"
          canvas-id="funnelChart"
          class="charts"
          @touchstart="touchPie($event, 'funnelChart')" />
        <!--#endif-->
      </view>

      <view class="info-box">
        <view class="box" style="color: #6ca2ff">
          <text class="mini-title">
            赢单
          </text>
          <text class="info">
            {{ funnelData.winSingle || '0.00' }}元
          </text>
        </view>
        <view class="box" style="color: #ff7474">
          <text class="mini-title">
            输单
          </text>
          <text class="info">
            {{ funnelData.loseSingle || '0.00' }}元
          </text>
        </view>
      </view>
    </view>
  </home-section>
</template>

<script>
  import { crmInstrumentSellFunnel } from 'API/crm/work'
  import { BusinessStatusOptions } from 'API/crm/business'

  import HomeSection from './homeSection'
  import uCharts from '@/components/u-charts/u-charts.js'

  let funnelChart = null

  // 销售漏斗
  export default {
    name: 'ChartFunnel',
    components: {
      HomeSection
    },
    props: {
      params: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        loading: false,
        title: '销售漏斗',
        dropOptions: [],

        cWidth: '',
        cHeight: '',
        pixelRatio: 1,
        serverData: '',

        funnelData: {}
      }
    },
    watch: {
      params: {
        handler() {
          if (this.dropVal) {
            this.getData(this.dropVal)
          }
        },
        deep: true
      }
    },
    mounted() {
      const _self = this;
      // #ifdef MP-ALIPAY
      uni.getSystemInfo({
        success: function(res) {
          if (res.pixelRatio > 1) {
            // 正常这里给2就行，如果pixelRatio=3性能会降低一点
            // _self.pixelRatio =res.pixelRatio;
            _self.pixelRatio = 2;
          }
        }
      });
      // #endif
      this.cWidth = uni.upx2px(686);
      this.cHeight = uni.upx2px(380);
      this.gaugeWidth = uni.upx2px(30);
      this.getBusinessOptions();
    },
    methods: {
      getData(typeId) {
        if (this.loading) return
        this.loading = true
        this.dropVal = typeId
        crmInstrumentSellFunnel({
        ...this.params,
        typeId: typeId
        }).then(res => {
          this.loading = false
          console.log('销售漏斗：', res)
          this.funnelData = {
            winSingle: res.sumYing,
            loseSingle: res.sumShu
          }
          this.initChart('funnelChart', res.list || [])
        }).catch(() => {
          this.loading = false
        })
      },

      getBusinessOptions() {
        if (this.loading) return
        this.loading = true
        BusinessStatusOptions().then(res => {
          this.loading = false
          this.dropOptions = res.map(item => {
            return {
              label: item.name,
              value: item.typeId
            }
          })
        }).catch(() => {
          this.loading = false
        })
      },

      handleToggleStatus(typeId) {
        this.getData(typeId)
      },

      initChart(canvasId, chartData) {
        const _self = this
        const seriesData = chartData.map((o, i) => {
          return {
            name: o.name,
            data: o.count,
            money: o.money
          }
        })
        // eslint-disable-next-line new-cap
        funnelChart = new uCharts({
          $this: _self,
          canvasId: canvasId,
          width: _self.cWidth * _self.pixelRatio,
          height: _self.cHeight * _self.pixelRatio,
          type: 'funnel',
          pixelRatio: _self.pixelRatio,
          background: '#FFFFFF',
          fontSize: 12,
          animation: false,
          dataLabel: true,
          // legend: { // 图例
          // 	show: false
          // },
          extra: {
            funnel: {
              border: true,
              activeWidth: 5,
              borderWidth: 2,
              borderColor: '#FFFFFF'
            },
            tooltip: {}
          },
          series: seriesData
        })

        console.log('funnelChart', funnelChart)
      },

      touchPie(e) {
        funnelChart.showToolTip(e, {
          textList: [
            { text: '' },
            { text: '' }
          ],
          format: function(item, category) {
            console.log('item', item)
            console.log('category', category)
            this.textList = [
              { text: `${item.name}(${item.data})`, color: item.color },
              { text: `预测金额：${item.money}元`, color: null }
            ]
            return this.textList
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.chart-body {
  padding: 20rpx 0;
  .charts {
    position: relative;
    width: 100%;
    height: 380rpx;
  }

  .info-box {
    width: 100%;
    @include center;
    .box {
      width: 40%;
      flex-direction: column;
      @include center;
      .mini-title {
        font-size: 24rpx;
      }
      .info {
        font-size: 28rpx;
      }
    }
  }
}
</style>