echarts组件——漏斗图

echarts组件——漏斗图

组件代码

<template>
  <div :class="classname" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    classname: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    color: { // 颜色
      type: Array,
      default: () => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    },
    legenddata: { // 图例
      type: Array,
      default: () => []
    },
    seriesbottom: {
      type: Number,
      default: 80
    },
    funneldata: {
      type: Array,
      default: () => [
        { value: 100, ratio: 100, name: 'Show' },
        { value: 80, ratio: 80, name: 'Click' },
        { value: 20, ratio: 20, name: 'Visit' }
      ]
    },
    labelshow: {
      type: Boolean,
      default: false
    },
    min: { // 数据为0时，最小尺寸
      type: Number,
      default: 0
    },
    emphasisshow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    funneldata: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el, 'macarons')
      }

      this.chart.setOption({
        color: this.color,
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let result = ''
            if (params.data.ratio) {
              result = `<div style="display: flex; justify-content: space-between"><span>${params.data.name}:&nbsp;</span><span>${params.data.value}, 占比 ${params.data.ratio}%</span></div>`
            } else {
              result = `<div style="display: flex; justify-content: space-between"><span>${params.data.name}:&nbsp;</span><span>${params.data.value}</span></div>`
            }
            return result
          }
        },
        legend: {
          show: this.legenddata.length > 0,
          data: this.legenddata,
          bottom: '0',
          orient: 'vertical'
        },
        series: [
          {
            name: '',
            type: 'funnel',
            left: '10%',
            top: '3%',
            bottom: this.seriesbottom,
            width: '80%',
            min: this.min,
            // max: 100,
            minSize: `${this.min}%`,
            maxSize: '100%',
            sort: 'descending',
            label: {
              show: this.labelshow,
              color: '#ffffff',
              position: 'inside',
              formatter: '{b}\n{c}'
            },
            emphasis: {
              label: {
                show: this.emphasisshow
              }
            },
            data: this.funneldata
          }
        ]
      })
    }
  }
}
</script>

使用组件，传值格式可以看组件的默认数据的格式

因为需要完整的现实文字和数字，所以此组件当值为0的时候，最下面的不会变成尖的，min参数控制的