echarts 漏斗图

1. vue按需引入漏斗图

/**
 * echarts版本 4.9.0
 * main.js
 */
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/funnel') // 漏斗
require('echarts/lib/component/title') // 图表标题
require('echarts/lib/component/dataZoom') // dataZoom组件

Vue.prototype.$echarts = echarts

2. 组件中使用

<template>
  <div class="funner-echart-container">
    <div ref="funnerEchart"></div>
  </div>
</template>

<script>
export default {
  name: 'FunnelEchart',
  data() {
    return {
      color: ['#9cbbfb', '#7da5fc', '#5b90fa', '#4077ec', '#2b67db'],
      echartData: [
        { value: 100, name: 'Show' },
        { value: 80, name: 'Click' },
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order', labelLine: { show: false }}
      ]
    }
  },
  methods: {
    initOption() {
      return {
        color: this.color,
        series: [
          // 外部
          {
            ...this.handleSameOption(),
            silent: true, // 不处理鼠标事件
            label: {
              position: 'rightBottom',
              color: '#000',
              lineHeight: 16,
              formatter: (params) => {
                return params.dataIndex === this.echartData.length - 1
                  ? ''
                  : `{name|开户率} ${params.data.value}\n{name|提升率} 1`
              },
              rich: { // 自定义富文本样式
                name: {
                  color: 'skyblue'
                }
              }
            },
            labelLine: { // 标签视觉引导线样式
              length: 50,
              lineStyle: {
                color: '#eaeaea'
              }
            }
          },
          // 内部
          {
            ...this.handleSameOption(),
            label: {
              position: 'inside'
            }
          }
        ]
      }
    },
    // 处理相同配置
    handleSameOption() {
      return {
        name: 'FunnelEcharts',
        type: 'funnel',
        top: '5%',
        left: '-10%',
        width: '90%',
        height: '90%',
        minSize: '20%', // 如果需要最小值的图形并不是尖端三角，可通过设置该属性实现
        maxSize: '60%',
        itemStyle: {
          borderWidth: 0 // 描边线宽
        },
        data: this.echartData
      }
    }
  },
  mounted() {
    const myChart = this.$echarts.init(this.$refs.funnerEchart)
    myChart.setOption(this.initOption())
    window.onresize = function() {
      myChart.resize()
    }
  }
}
</script>

<style scoped lang="less">
  .funner-echart-container {
    > div {
      height: 280px;
    }
  }
</style>

3. 最终效果图