美文网首页
echarts 漏斗图

echarts 漏斗图

作者: 浅忆_0810 | 来源:发表于2022-04-24 14:49 被阅读0次

    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. 最终效果图

    相关文章

      网友评论

          本文标题:echarts 漏斗图

          本文链接:https://www.haomeiwen.com/subject/ihutyrtx.html