vue可视化组件
vue开发的可视化组件,包含柱状图组件,圆形进度条组件:使用方式:NPM下载安装vue-charts-jfnpm install vue-charts-jf --saveimport vueChart from 'vue-charts-jf'Vue.use(vueChart);github地址:https://github.com/jianfeng418/vue-charts...
·
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();
}
}
参数说明
参数名称 | 类型 | 描述 | 默认值 |
barData | Object | 可视化数据源 | |
tickValue | Number | y轴间隔距离 | 默认自动计算 |
maxValue | Number | y轴最大值 | 默认自动计算 |
dataType | 'int' 或者 'percent' | y轴以整数显示或百分比数显示 | 'int' |
precision | Number | 数据显示的小数点数 | 0 |
barWid | Number | bar图形的宽度 | 30 |
barData数据格式:
参数名称 | 类型 | 描述 | 默认值 |
title | String | 图表的名称 | |
list | Array | 数据列表 | 包含数据对象的数组,数据对象格式见下表 |
barData.list数据格式:
参数名称 | 类型 | 描述 | 默认值 |
color | String | bar图形的颜色 | |
title | String | bar图形的名称 | |
num | Number | bar图形的数量 |
方法说明:
方法名称 | 参数 | 返回值 | 描述 |
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'
}
}
}
参数说明
参数名称 | 类型 | 描述 | 默认值 |
circleData | Object | 可视化数据源 | |
centerStyle | Objectr | 圆心处文字样式 | { fontSize:'18px', fontFamily:'sans-serif', fontColor:'#000', } |
showTip | Boolean | 是否显示提示 | true |
showLegend | Boolean | 是否显示图例 | true |
precision | Number | 数据显示的小数点数 | 0 |
stepLength | Number | 初始动画进度的步长 | 0.05 |
intervalTime | Number | 初始动画进度的间隔 | 60 |
circleData数据格式:
参数名称 | 类型 | 描述 | 默认值 |
total | Number | 所有数据的总数 | |
list | Array | 数据列表 | 包含数据对象的数组,数据对象格式见下表 |
circleData.list数据格式:
参数名称 | 类型 | 描述 | 默认值 |
color | String | circle进度图形的颜色 | |
title | String | circle进度图形的名称 | |
num | Number | circle进度图形的数量 |
方法说明:
方法名称 | 参数 | 返回值 | 描述 |
draw | 重新绘制图表,在数据更新后,可调用该方法实现图表重绘 |
更多推荐
已为社区贡献5条内容
所有评论(0)