vue svg放大缩小组件
VueFunnelGraph.js (VueFunnelGraph.js)
Funnel graph drawing library for Vue.js.
Vue.js的漏斗图绘制库。
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
水平和垂直图
![](https://s2.gifyu.com/images/funnel-graph.gif)
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放大缩小组件