vue svg放大缩小组件_Vue.js组件绘图SVG漏斗图

vue svg放大缩小组件

VueFunnelGraph.js (VueFunnelGraph.js)

Funnel graph drawing library for Vue.js.

Vue.js的漏斗图绘制库。

View Demo 查看演示 Download Source 下载源

• SVG charts

  SVG图表

• Values, Labels, Percentages display

  值，标签，百分比显示

• Two-dimensional graph support

  二维图形支持

  • Legend display
    图例显示
  • Detailed percentage breakdown on hover
    悬停的详细百分比细分

• Animated

  动画的

• Solid color and gradient fill

  纯色和渐变填充

• Horizontal and vertical charts

  水平和垂直图

This is the Vue.js version of FunnelGraph.js, learn more about the library and see documentation here.

这是FunnelGraph.js的Vue.js版本，了解有关该库的更多信息，请参见此处的文档。

开发示范 (Development Demo)

• Clone the repo

  克隆仓库

• Navigate to src folder

  导航到src文件夹

• Run vue serve example.vue

  运行vue serve example.vue

• Visit the URL displayed

  访问显示的网址

安装 (Installation)

NPM (NPM)

npm i vue-funnel-graph-js

联合国儿童基金会 (UNPKG)

<script src="https://unpkg.com/vue-funnel-graph-js"></script>

CDN (CDN)

<script src="https://cdn.jsdelivr.net/npm/vue-funnel-graph-js/dist/vue-funnel-graph.min.js"></script>

用法 (Usage)

After installing, import the VueFunnelGraph component:

安装后，导入VueFunnelGraph组件：

import { VueFunnelGraph } from 'vue-funnel-graph-js';

You can now use the custom element:

您现在可以使用自定义元素：

<vue-funnel-graph :width="width" :height="height" :labels="labels"
              :values="values" :colors="colors" :sub-labels="subLabels" :direction="direction"
              :gradient-direction="gradientDirection"
              :animated="true" :display-percentage="true"
></vue-funnel-graph>

The values are passed to props:

这些值将传递给prop：

export default {
  name: 'app',
  components: {
      VueFunnelGraph
  },
  data() {
      return {
          labels: ['Impressions', 'Add To Cart', 'Buy'],
          subLabels: ['Direct', 'Social Media', 'Ads'],
          values: [
          // with the given Labels and SubLabels here's what the values represent:
          // 
          // Direct, Social, Ads  
          //    |      |     |  
          //    v      v     v
              [3000, 2500, 6500], // Segments of "Impressions" from top to bottom
              [3000, 1700, 1000], // Segments of "Add To Cart"
              [600,  200,  130]   // Segments of "Buy"
          ],
          colors: [
              ['#FFB178', '#FF3C8E'], // color set for "Impressions" segment
              ['#A0BBFF', '#EC77FF'], // color set for "Add To Cart" segment
              ['#A0F9FF', '#7795FF']  // color set for "Buy" segment
          ],
          direction: 'horizontal',
          gradientDirection: 'horizontal',
          height: 300,
          width: 800
      };
  }
}

选件 (Options)

Option	Description	Type	Required	Options	Default	Example
width	Width of the funnel graph	number	Yes		0	800
height	Height of the funnel graph	number	Yes		0	300
labels	Title of each data part	array	Yes			['Impressions', 'Add To Cart', 'Buy']
values	Numbers that the funnel chart visualizes	array	Yes			[12000, 4700, 930]
colors	Colors of the graph. If a string or array with one element passed it fills the graph with a solid color, if the array contains more than one element it fill the graph with a gradient. For two-dimensional charts and array of arrays shall be passed to fill each segment with a separate gradient. The array can contain arrays and strings mixed. If a there are more segments than colors provided, up to 10 extra segments will be filled with pre-defined solid colors	array⎮string	Yes			[12000, 4700, 930]
subLabels (:sub-labels)	Title of each data segment	array	Yes for two-dimensional graphs			['Direct', 'Social Media', 'Ads']
direction	Whether the chart visualization is displayed vertically or horizontally	string	No	'vertical', 'horizontal'	'horizontal'
gradientDirection (:gradient-direction)	Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right	string	No	'vertical', 'horizontal'	'horizontal'
animated	Whether any change in graph shape will be displayed with a smooth transition	boolean	No	true, false	true	false
displayPercentage (:display-percentage)	Whether to display the automatically calculated percentage values below the labels	boolean	No	true, false	true

选项	描述	类型	需要	选件	默认	例
width	漏斗图的宽度	number	是		0	800
height	漏斗图的高度	number	是		0	300
labels	每个数据部分的标题	array	是			[“展示次数”，“添加到购物车”，“购买”]
values	漏斗图可视化的数字	array	是			[12000、4700、930]
colors	图形的颜色。 如果传递的字符串或数组具有一个元素，则它将用纯色填充图形，如果数组包含多个元素，则将用渐变填充图形。 对于二维图表和数组数组，应使用单独的渐变填充每个段。 数组可以包含混合的数组和字符串。 如果分段数量超过了提供的颜色，则多达10个额外的分段将被填充预定义的纯色	array⎮string	是			[12000、4700、930]
subLabels (:sub-labels)	每个数据段的标题	array	是的，对于二维图形			[“直接”，“社交媒体”，“广告”]
direction	图表可视化是垂直显示还是水平显示	string	没有	'垂直水平'	“水平”
gradientDirection (:gradient-direction)	应用于图段的渐变是从上到下还是从左到右显示	string	没有	'垂直水平'	“水平”
animated	图形形状的任何变化是否将以平滑过渡显示	boolean	没有	true ， false	true	false
displayPercentage (:display-percentage)	是否在标签下方显示自动计算的百分比值	boolean	没有	true ， false	true

翻译自: https://vuejsexamples.com/vue-js-component-drawing-svg-funnel-graphs/

vue svg放大缩小组件