竖向柱状图
竖向自动滚动的柱状图，颜色文字图片等皆可修改，详情见代码
组件代码：
<template>
<!-- 柱状图 横向滚动柱状图 -->
<div :id="histogramId" v-bind:style="{height:height,width:width}"></div>
</template>
<script type="text/ecmascript-6">
export default {
props:{
histogramId:{
type:String,
default:''
},
//组件的高度
height: {
type: String,
default: '230px'
},
//组件的宽度
width: {
type: String,
default: '100%'
},
barWidth:{
type:Number,
default:15
},
//grid的设置修改
grid:{
type:Object,
default:()=>{
return{
bottom:40,
top:30,
left:40,
right:20
}
}
},
//xAxis相关变量
xAxis:{
type:Object,
default:()=>{
return{
max:5,
axisLineShow:true,
axisLineColor:'rgba(188, 198, 207, 0.4)',
axisLabelColor:'#B8C5D2',
axisLabelSize:12,
axisLabelRotate:20,
splitLineShow:false,
splitLineColor:'rgba(255,255,255,0.1)',
splitLineType:'',
axisLabelColorLabel:'#B8C5D2', //居于背景最上方的时候的文字颜色
axisLabelSizeLabel:12,
axisLabelRotateLabel:0,
axisLabelShowLabel:false,
}
}
},
yAxis:{
type:Object,
default:()=>{
return{
show:true,
axisLineShow:false,
axisLineColor:'rgba(188, 198, 207, 0.4)',
axisLabelColor:'rgba(255,255,255,0.6)',
axisLabelSize:12,
splitLineShow:true,
splitLineColor:'rgba(255,255,255,0.1)',
splitLineType:'dashed',
axisLabelShow:true,
}
}
},
colors:{ //非渐变下的数组颜色
type:Array,
default:()=>['#48D0F5','#FFF445','#17DA45','#F93358','#FF9829','#F842FF','#48D0F5','#FFF445','#17DA45','#F93358','#FF9829','#F842FF','#48D0F5','#FFF445','#17DA45','#F93358','#FF9829',