vue 可视化布局工具,vue视组件

vue开发的可视化组件，包含柱状图组件，圆形进度条组件： github地址:https://github.com/jianfeng418/vue-charts

柱状图功能支持：
1.自定义柱状图宽度，颜色，数量；
2.自动计算最大值，纵坐标间隔；
3.鼠标hover显示提示；
4.支持百分比显示；

进度圆功能支持：
1.自定义圆弧数量，颜色；
2.鼠标hover时显示提示信息；
3.支持图例显示隐藏；
4.支持圆心处文字编辑以及样式自定义；
5.支持百分比显示

使用方式： NPM下载安装vue-charts-jf npm install vue-charts-jf --save import vueChart from 'vue-charts-jf'Vue.use(vueChart); vue-bar柱状图

使用示例：

<button @click='updateBar' style='float:left'>update</button> <vue-bar ref='vuebar' :barData='barData' :barWid='50' class='barDiv' style='clear:both'></vue-bar> <vue-bar ref='perbar' :barData='percentData' :maxValue='1' dataType='percent' :tickValue='0.2' :precision='2' class='barDiv' ></vue-bar>... data () { return { msg: 'Welcome to Your vue-charts', barData:{ title:'业绩（单位w）', list:[ {color:'#53b85e',title:'一季度',num:5}, {color:'#53805e',title:'二季度',num:14}, {color:'#4efff0',title:'三季度',num:6}, {color:'#8a94ee',title:'四季度',num:16}, ] }, percentData:{ title:'业绩达成率', list:[ {color:'#53b85e',title:'一季度',num:0.15}, {color:'#53805e',title:'二季度',num:0.84}, {color:'#4efff0',title:'三季度',num:0.6}, {color:'#8a94ee',title:'四季度',num:0.76}, ] } } }... methods:{ updateBar(){ this.barData.list = [ {color:'#53b85e',title:'一季度',num:8}, {color:'#53805e',title:'二季度',num:12}, {color:'#4efff0',title:'三季度',num:9}, {color:'#8a94ee',title:'四季度',num:18} ] this.percentData.list = [ {color:'#53b85e',title:'一季度',num:0.35}, {color:'#53805e',title:'二季度',num:0.74}, {color:'#4efff0',title:'三季度',num:0.56}, {color:'#8a94ee',title:'四季度',num:0.86}, ] this.$refs.vuebar.draw(); this.$refs.perbar.draw(); } }

参数说明

参数名称类型描述默认值barDataObject可视化数据源tickValueNumbery轴间隔距离默认自动计算maxValueNumbery轴最大值默认自动计算dataType'int' 或者 'percent'y轴以整数显示或百分比数显示'int'precisionNumber数据显示的小数点数0barWidNumberbar图形的宽度30

barData数据格式：

参数名称类型描述默认值titleString图表的名称listArray数据列表包含数据对象的数组，数据对象格式见下表

barData.list数据格式：

参数名称类型描述默认值colorStringbar图形的颜色titleStringbar图形的名称numNumberbar图形的数量

方法说明：

方法名称参数返回值描述draw重新绘制图表，在数据更新后，可调用该方法实现图表重绘 vue-circle圆形进度图

使用示例：

<div class='circleDiv'> <vue-circle :circleData='circleData' style='height:300px' centerText='22' :showTip='true' :showLegend='true' ></vue-circle> </div> <div class='circleDiv' > <vue-circle :circleData='perCircleData' style='height:300px' centerText='22%' :showTip='true' :showLegend='true' :centerStyle='cenStyle'></vue-circle> </div>... data () { return { msg: 'Welcome to Your vue-charts', circleData:{ totle:23, list:[ {num:8,title:'一季度',color:'#53b85e'}, {num:3,title:'二季度',color:'#53805e'}, {num:5,title:'三季度',color:'#4e1ff0'}, {num:7,title:'四季度',color:'#8a94ee'} ] }, perCircleData:{ totle:23, list:[ {num:8,title:'一季度',color:'#53b85e'}, ] }, cenStyle:{ fontSize:'24px', fontFamily:'sans-serif', fontColor:'#999' } } }

参数说明

参数名称类型描述默认值circleDataObject可视化数据源centerStyleObjectr圆心处文字样式{ fontSize:'18px', fontFamily:'sans-serif', fontColor:'#000', }showTipBoolean是否显示提示trueshowLegendBoolean是否显示图例trueprecisionNumber数据显示的小数点数0stepLengthNumber初始动画进度的步长0.05intervalTimeNumber初始动画进度的间隔60

circleData数据格式：

参数名称类型描述默认值totalNumber所有数据的总数listArray数据列表包含数据对象的数组，数据对象格式见下表

circleData.list数据格式：

参数名称类型描述默认值colorStringcircle进度图形的颜色titleStringcircle进度图形的名称numNumbercircle进度图形的数量

方法说明：

方法名称参数返回值描述draw重新绘制图表，在数据更新后，可调用该方法实现图表重绘