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数据显示的小数点数0
barWidNumberbar图形的宽度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是否显示提示true
showLegendBoolean是否显示图例true
precisionNumber数据显示的小数点数0
stepLengthNumber初始动画进度的步长0.05
intervalTimeNumber初始动画进度的间隔60

circleData数据格式:

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

circleData.list数据格式:

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

方法说明:

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

前往低代码交流专区

更多推荐