横向柱状图
横向自动滚动的柱状图，颜色文字等参数详见代码，都可进行传参修改
PS：统一说明，修改子组件中的对象中的某一个值是通过$refs来修改
横向单个滚动
简单的基础展示，相关实现均可在代码中修改参数来做出展示。或在其基础上进行修改
组件代码如下：
<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:13
},
barBorderRadius:{ //柱子的radius
type:Array,
default:()=>[0,0,0,0]
},
//grid的设置修改
grid:{
type:Object,
default:()=>{
return{
bottom:10,
top:10,
left:70,
right:30
}
}
},
colors:{ //非渐变下的数组颜色
type:Array,
default:()=>['#4BAAF7','#FFBA27','#F55150','#17DACC','#17DA45']
},
colorsJian:{ //渐变下的数组颜色设置
type:Array,
default:()=>[
['rgba(255,255,255,0.1)','#4BAAF7'],['rgba(255,255,255,0.1)','#FFBA27'],
['rgba(255,255,255,0.1)','#F55150'],['rgba(255,255,255,0.1)','#17DACC'],
['rgba(255,255,255,0.1)','#17DA45']
]
},
isJian:{ //颜色是否时渐变模式
type:Boolean,
default:false
},
isSingleColor:{ //是否单条数据多个颜色
type:Boolean,
default:true
},
bgBar:{ //背景颜色
type:String,
default:'rgba(128, 164, 229, 0)'
},
showNum:{ //开始展示几条数据
type:Number,
default:4
},
yAxis:{ //相关的yAxis的变量
type:Object,
default:()=>{
return{
axisTickShow:false,
axisLineShow: