Wf-charts-vue2 NPM

npm 安装

该组件库依赖 echarts 该组件库的默认导出是注册完成的组件库

npm i wf-charts-vue2 -S
npm i echarts@4.9.0 -S

快速上手

引入组件

在 main.js 中写入以下内容：

import Vue from 'vue';
import App from './App.vue';

import WfChartsVue2 from 'wf-charts-vue2'

Vue.use(WfChartsVue2)

new Vue({
  el: '#app',
  render: h => h(App)
});

开始使用

饼图

引入方式: 组件引入

<wf-pie-chart></wf-pie-chart>

Attributes | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | pieWidth | 饼状图的宽度 | number 或 string | false | 500| | pieHeight | 饼状图的高度 | number 或 string | false | 500| | label | 标签文本的内容 | string | false | | | colorList | 饼状图的颜色值,默认给了 10 种颜色，当数据大于 10 时，会默认取最后一种颜色 | Arrary | false | | | pieData | 饼状图数据源，例：{name:'一月',value:60} | array | true | | | tooltipFormatter | tooltip 的显示格式，{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） | string | false | {b}: {c}人 | | labelFormatter | label 的显示格式，与 tooltipFormatter 类似 | string | false | {a|{b}：}{b|{d}%}| | seriesRadius | 饼状图的环形圆大小 | array | false | "45%", "65%"| | pieSeries | 需要重新配置饼状图的 series 时可使用，会覆盖键名相同的项 | object | false | | | pieGraphic | 需要重新配置饼状图的 graphic 时可使用，会覆盖键名相同的项 | object | false | | | center | 饼图的位置 | array | false | "30%", "50%" | | pieLegend | 图例的配置,详见下方 | object | false | | | left | 饼图中间文字距离左边的位置 | string | false | 36% | | top | 饼图中间文字距离上边的位置 | string | false | 50% |

pieLegend Options | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | left | 距离左边的位置 | string | false | 80%| | itemGap | 上下的距离 | number | false | 20| | color | 文字的颜色 | string | false | "#000"| | top | 距离上方的位置 | string | false | center|

多个饼图

引入方式: 组件引入

<wf-many-piecharts></wf-many-piecharts>

Attributes | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | pieWidth | 饼状图的宽度 | number 或 string | false | 500| | pieHeight | 饼状图的高度 | number 或 string | false | 500| | manyPieData | 饼状图数据源，例：{name:'一月',value:60} | array | true | | | userTotal | 统计的总数，用于计算百分比 | number | true | 0| | pieRadius | 饼状图的环形圆大小 | array | false | 50, 60| | labelFontSize | label 的字体大小 | string | false | 20| | titleFontSize | title 的字体大小 | string | false | 12| | manyPieColorList | 饼状图的颜色值,二维数组，默认给了 5 对颜色值 | array | false | |

仪表盘

引入方式: 组件引入

<wf-dashboard></wf-dashboard>

annularCollocation Options | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | annularSize | 进度条圆大小 | string | false | 60%| | annularColor | 进度条颜色 | string | false | "#458EFD"| | annularWidth | 进度条宽度 | number | false | 14|

柱状+折线

引入方式: 组件引入

<wf-column-brokenline></wf-column-brokenline>

Attributes | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | pieWidth | 图表的宽度 | number 或 string | false | 500| | pieHeight | 图表的高度 | number 或 string | false | 500| | chartData | 图表的数据源,例：{name:'一月',value:20} | array | true | | | top | 距离上方的位置 | string | false | 15%| | right | 距离右方的位置 | string | false | 10%| | left | 距离左方的位置 | string | false | 10%| | bottom | 距离下方方的位置 | string | false | 12%| | xAxis | x 轴配置项，详见下方 | object | false | | | yAxis | y 轴配置项，详见下方 | object | false | | | xAxis | 圆柱配置项，详见下方 | object | false | |

xAxis Options | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | xLabelMargin | label 边距 | number | false | 20| | xLabelColor | 字体颜色 | string | false | '#999'| | xLabelFontSize | 字体大小 | number | false | 18|

yAxis Options | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | yLabelFormatter | label 的显示格式化 | string | false | "{value}%"| | yLabelColor | 字体颜色 | string | false | '#999'| | yLabelFontSize | 字体大小 | number | false | 18|

环形图

引入方式: 组件引入

<wf-annular></wf-annular>

Attributes | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | pieWidth | 图表的宽度 | number 或 string | false | 500| | pieHeight | 图表的高度 | number 或 string | false | 500| | chartData | 图表的数据源，例：{name:'本科及以上',value:13211,unit:'元'} | array | true | | | colorList | 每个环形的颜色值 | array | false | "#FF8700", "#ffc300", "#00e473", "#009DFF"| | pieRadius | 每个环形的大小 | array | false | ["65%", "57%","50%", "42%","35%", "27%","20%", "12%"]| | notesAllocation | 注释框的配置，详见下方 | object | false | |

折线图

引入方式: 组件引入

<wf-line-chart></wf-line-chart>

legendAllocation Options | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | itemWidth | 宽度 | number | false | 6| | itemGap | 边距 | number | false | 20| | color | 字体颜色 | string | false | '#556677'| | right | 距离右侧的位置 | string | false | '#556677'|

横向柱状

引入方式: 组件引入

<wf-transverse-col></wf-transverse-col>

Attributes | 参数 | 说明 | 类型 | 是否必传 | 默认值 | | :----: | :----: | :----: | :----: | :----: | | pieWidth | 图表的宽度 | number 或 string | false | 600| | pieHeight | 图表的高度 | number 或 string | false | 600| | chartData | 图表数据源，例：{name:'类别 1',value:4545}| arrary | true | | | labelColor | label 的颜色值，前三取前三个颜色值，之后默认取最后一个颜色值 | arrat | false | "#FD5360", "#FF962B", "#FFAA00", "#1890FF"| | top | 图表距离上方的位置 | string | false | '5%'| | left | 图表距离左方的位置 | string | false | '1%'| | right | 图表距离右方的位置 | string | false | '15%'| | bottom | 图表距离下方的位置 | string | false | '3%'| | barWidth | 柱状的宽度 | number | false | 10| | barColorStart | 柱状渐变色的开始值 | string | false | "#3D9FFF"| | barColorEnd | 柱状渐变色的结束值 | string | false | "#41D7F3"|

折线图（库存）

引入方式: 组件引入

<wf-broken-line></wf-broken-line>

vue2 wf-charts

@everything-registry/sub-chunk-3141

0.0.1

5 months ago