竖向柱状图

竖向自动滚动的柱状图，颜色文字图片等皆可修改，详情见代码

组件代码：

<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','#F842FF']},colorsJian:{          //渐变下的数组颜色设置type:Array,default:()=>[["rgba(229, 248, 253, 0.7)", "#48D0F5"],["rgba(229, 248, 253, 0.7)", "#FFF445"],["rgba(229, 248, 253, 0.7)", "#17DA45"],["rgba(229, 248, 253, 0.7)", "#F93358"],["rgba(229, 248, 253, 0.7)", "#FF9829 "],["rgba(229, 248, 253, 0.7)", "#F842FF"],["rgba(229, 248, 253, 0.7)", "#48D0F5"],["rgba(229, 248, 253, 0.7)", "#FFF445"],["rgba(229, 248, 253, 0.7)", "#17DA45"],["rgba(229, 248, 253, 0.7)", "#F93358"],["rgba(229, 248, 253, 0.7)", "#FF9829 "],["rgba(229, 248, 253, 0.7)", "#F842FF"],["rgba(229, 248, 253, 0.7)", "#48D0F5"],["rgba(229, 248, 253, 0.7)", "#FFF445"],["rgba(229, 248, 253, 0.7)", "#17DA45"],["rgba(229, 248, 253, 0.7)", "#F93358"],["rgba(229, 248, 253, 0.7)", "#FF9829 "],["rgba(229, 248, 253, 0.7)", "#F842FF"],]},isSingleColor:{   //是否单条数据多个颜色type:Boolean,default:true},showNum:{   //开始展示几条数据type:Number,default:4},barBorderRadius:{   //柱子的radiustype:Array,default:()=>[0,0,0,0]},isJian:{   //颜色是否时渐变模式type:Boolean,default:true},jianLength:{   //颜色渐变从哪里开始，默认是0.2，一般设置为1type:Number,default:0.2},series:{    //跟在柱子后的value，且不是在最上方的时候type:Object,default:()=>{return{show:true,     //主子上方跟的值color:'#B8C5D2',fontSize:12,distance:5,  //文字距离}}},bgData:{   //柱状图背景type:Object,default:()=>{return{show:false,bgColor:'rgba(0,0,0,0)',}}},ciecleImg:{   //上方小圆点是否展示type:Object,default:()=>{return{// symbolSize: [50, 50],symbolSize:[0,0],symbolOffset: [0, -25],imgUrl:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg=='}}},dataObj:{   //相关数据的整理type:Object,default:()=>{return{// name:['活力邻里','活力队伍','活力组织','活力服务','活力发展'],name:['活力邻里'],xData:['天水社区','悦来社区','金融港社区','很多社区','金水社区','哈哈社区','丽日社区'],data1:[65,55,60,25,45,50,30],data2:[30,50,20,55,10,40,35],data3:[45,25,35,12,5,15,5],data4:[66,44,33,25,77,22,11],data5:[33,11,22,45,15,10,33]}}},},data(){return{surveyInit:'',BgDataData:[]}},methods:{initMoreColorZhu(){let that=this;var typeData = this.dataObj.namevar xData = that.dataObj.xData,yData = [], maxData = [],circleData = [];function sumArr(arr){var result = [];for(var i = 0;i<arr.length;i++){var subArr = arr[i];var subResult = []for(var j = 0;j<subArr.length;j++){var current = subArr[j]var previous = result[i-1] ? result[i-1][j] : 0;var sum = current + previous;subResult.push(sum)}result.push(subResult)}//subResult是返回最大的求和数组值return subResult};var squares = new Array();for(var v = 0; v < typeData.length; v++){//依次创建数组squares[v] = new Array();squares[v] = that.dataObj['data'+(v+1)]}//左侧name的展示yData = sumArr(squares)var max=Math.max.apply(null, yData);  //最大值yData.forEach(item=>{maxData.push(max)    //最大值组成的数组})function getSymbolData (data) {let arr = [];for (var i = 0; i < data.length; i++) {arr.push({value: data[i],symbolPosition: 'end'})}return arr;}circleData = getSymbolData(yData)//创建seriesfunction creatArr(squares){var seriesArr = []let serOne = {name: '数量',type: 'bar',barWidth:that.barWidth,barCategoryGap: '10%',tooltip:{show:false},barGap: '-100%',z:1,label: {show: false,},itemStyle: {barBorderRadius: that.barBorderRadius,color:  that.bgData.bgColor,},data: maxData}let circle = {name: 'XXX',type: 'pictorialBar',tooltip: {show: false},symbol: that.ciecleImg.imgUrl,symbolSize: that.ciecleImg.symbolSize,symbolOffset: that.ciecleImg.symbolOffset,z: 12,barGap: '-100%',data: circleData}seriesArr.push(circle)for(var i = 0;i<squares.length;i++){let item = {name: typeData[i],type: 'bar',barWidth:that.barWidth,barCategoryGap: '10%',stack: '总量',z:2,show:false,label: {show: that.series.show,position: 'top',color: that.series.color,fontSize: that.series.fontSize,distance:that.series.distance},itemStyle: {barBorderRadius: that.barBorderRadius,color: function(params){if(!that.isJian){//非渐变情况下的颜色赋值if(that.isSingleColor&&typeData.length==1){return that.colors[params.dataIndex]}else{return that.colors[params.componentIndex]}}else{//渐变颜色下的赋值if(that.isSingleColor&&typeData.length==1){return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:  that.colorsJian[params.dataIndex][0]// 0% 处的颜色}, {offset: that.jianLength,color: that.colorsJian[params.dataIndex][1] // 100% 处的颜色}], false)}else{return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: that.jianLength,color:  that.colorsJian[params.componentIndex][0]// 0% 处的颜色}, {offset: 1,color: that.colorsJian[params.componentIndex][1] // 100% 处的颜色}], false)}}},},data: squares[i]}seriesArr.push(item)}seriesArr.push(serOne)return seriesArr}that.surveyInit = that.$echarts.init(document.getElementById(this.histogramId));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'none',},},grid:{top: that.grid.top,left: that.grid.left,right: that.grid.right,bottom: that.grid.bottom,containLabel: false,},xAxis: [{type: 'category',boundaryGap: false,// boundaryGap: 100,min: -1,max: this.xAxis.max,axisLine: {show:this.xAxis.axisLineShow,lineStyle: {color: this.xAxis.axisLineColor,},},axisTick: {show:false,interval: (index) => {if (index === -1 || index === this.xAxis.max) {return false;} else {return true;}}},axisLabel: {color: this.xAxis.axisLabelColor,fontSize: this.xAxis.axisLabelSize,rotate:this.xAxis.axisLabelRotate,},splitLine: {show: this.xAxis.splitLineShow,lineStyle: {color: this.xAxis.splitLineColor,type:this.xAxis.splitLineType},},data: xData,},{type: 'category',boundaryGap: false,// boundaryGap: 100,min: -1,max: this.xAxis.max,axisLine:'none',axisTick:'none',axisLabel: {color: this.xAxis.axisLabelColorLabel,fontSize: this.xAxis.axisLabelSizeLabel,rotate:this.xAxis.axisLabelRotateLabel,show:this.xAxis.axisLabelShowLabel},splitLine:'none',data: yData,}],yAxis: [{show:this.yAxis.show,axisLine: {show:this.yAxis.axisLineShow,lineStyle: {color: this.yAxis.axisLineColor,}},axisLabel: {color: this.yAxis.axisLabelColor,fontSize: this.yAxis.axisLabelSize,show:this.yAxis.axisLabelShow},splitLine: {show:this.yAxis.splitLineShow,lineStyle: {color: this.yAxis.splitLineColor,type:  this.yAxis.splitLineType,}}}],series:creatArr(squares)};that.surveyInit.setOption(option);//滚动var key = 0;setInterval(function() {// 通过动态改变数据实现不停循环播放console.log(option)let y1 = option.xAxis[0].data,y2 = option.xAxis[1].data;y1.push(y1.shift());y2.push(y2.shift());var newArr = new Array()for(var i = 0;i<option.series.length;i++){newArr[i] = option.series[i].datanewArr[i].push(newArr[i].shift())}if(that.isSingleColor&&typeData.length==1){that.colors.push(that.colors.shift())that.colorsJian.push(that.colorsJian.shift())}circleData.push(circleData.shift())that.surveyInit.setOption(option);}, 3000);// setInterval(function() {//     var aa = xData.shift();//     // xData.shift();//     xData.push(aa);//     // yData.shift();//     var bb = yData.shift();//     yData.push(bb);//     circleData = getSymbolData(yData)//     // var cc = circleData.shift()//     // circleData.push(cc)//     // 颜色控制//     if(key>yData.length){key=0}//     key++;//     that.surveyInit.setOption({//         xAxis: {data: xData},//         series: [{//             data: circleData//         },{//             itemStyle: {//                 normal: {//                     color: function(params){//                         if(that.isJian){//                             return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{//                                 offset: 0,//                                 color:  that.colors[params.dataIndex][0]// 0% 处的颜色//                             }, {//                                 offset: that.jianLength,//                                 color: that.colors[params.dataIndex][1] // 100% 处的颜色//                             }], false)//                         }else{//                             return that.noJianColors[params.dataIndex]//                         }//                     }//                 }//             },//             data: yData//         }]//     });// }, 3000);},},watch:{width:function(){this.surveyInit.resize()},},mounted(){// 新建一个promise对象let newPromise = new Promise((resolve) => {resolve()})//然后异步执行echarts的初始化函数newPromise.then(() => {//  此dom为echarts图标展示domthis.initMoreColorZhu()})},
}
</script>