竖向自动滚动的柱状图，颜色文字图片等皆可修改，详情见代码
组件代码：
<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:{ //柱子的radius
type:Array,
default:()=>[0,0,0,0]
},
isJian:{ //颜色是否时渐变模式
type:Boolean,
default:true
},
jianLength:{ //颜色渐变从哪里开始，默认是0.2，一般设置为1
type: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.name
var 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)
//创建series
function 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].data
newArr[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图标展示dom
this.initMoreColorZhu()
})
},
}
</script>
