viser基础漏斗图

最新推荐文章于 2024-01-18 11:35:29 发布

Zh.冠军

最新推荐文章于 2024-01-18 11:35:29 发布

阅读量327

点赞数

分类专栏：前端 vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38673922/article/details/127300743

版权

vue 同时被 2 个专栏收录

52 篇文章 2 订阅

订阅专栏

前端

48 篇文章 2 订阅

订阅专栏

一、效果图

在这里插入图片描述

二、代码块

<template>
  <div>
    <v-chart :force-fit="true" :height="height" :padding="padding" :data="data" :scale="scale">
      <v-tooltip :show-title="false" :item-tpl="tooltipOpts.itemTpl" />
      <v-legend />
      <v-coord type="rect" direction="LT" />
      <v-pyramid :position="funnelOpts.position" :shape="funnelOpts.shape" :color="funnelOpts.color" :label="funnelOpts.label" :tooltip="funnelOpts.tooltip" />
      <v-guide v-for="(obj, index) in data"
        :key="index"
        type="text"
        :top="true"
        :position="getPosition(obj)"
        :content="getContent(obj)"
        :vStyle="style"
      />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set');

const sourceData = [
  { action: '浏览网站', pv: 50000 },
  { action: '放入购物车', pv: 35000 },
  { action: '生成订单', pv: 25000 },
  { action: '支付订单', pv: 15000 },
  { action: '完成交易', pv: 8000 },
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'percent',
  field: 'pv',
  dimension: 'action',
  as: 'percent'
});
const data = dv.rows;

const scale = {
  dataKey: 'percent',
  nice: false,
};

const tooltipOpts = {
  showTitle: false,
  itemTpl: '<li data-index={index} style="margin-bottom:4px;">'
      + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>'
      + '{name}<br/>'
      + '<span style="padding-left: 16px">浏览人数：{pv}</span><br/>'
      + '<span style="padding-left: 16px">占比：{percent}</span><br/>'
      + '</li>'
};

const funnelOpts = {
  shape: 'funnel',	//funnel平底  pyramid'尖底
  position: 'action*percent',
  color: ['action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']],
  label: ['action*pv', (action, pv) => {
    return action + ' ' + pv;
  }, {
    offset: 35,
    labelLine: {
      lineWidth: 1,
      stroke: 'rgba(0, 0, 0, 0.15)',
    }
  }],
  tooltip: ['action*pv*percent', (action, pv, percent) => ({
    name: action,
    percent: Math.floor(percent * 100) + '%',
    pv: pv,
  })]
};

export default {
  methods: {
    getPosition: (obj) => {
      return {
        action: obj.action,
        percent: 'median'
      };
    },
    getContent: (obj) => {
      return parseInt(String(obj.percent * 100)) + '%';
    }
  },
  data() {
    return {
      data,
      padding:[ 20, 120, 95 ],
      scale,
      height: 400,
      tooltipOpts,
      funnelOpts,
      style:{
        fill: '#fff',
        fontSize: '12',
        textAlign: 'center',
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)'
      },
    };
  },
};
</script>