相关组件代码：
<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:30
},
//grid的设置修改
grid:{
type:Object,
default:()=>{
return{
bottom:40,
top:30,
left:20,
right:10
}
}
},
//xAxis相关变量
xAxis:{
type:Object,
default:()=>{
return{
max:4,
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(44, 124, 245, 1)", "rgba(0, 72, 181, 1)"],
["rgba(252, 86, 89, 1)", "rgba(182, 51, 54, 1)"],
["rgba(242, 155, 118, 1)", "rgba(225, 128, 86, 1)"],
["rgba(240, 197, 92, 1)", "rgba(198, 161, 71, 1)"],
["rgba(52, 179, 110, 1)", "rgba(34, 142, 83, 1) "],
["rgba(61, 136, 227, 1)", "rgba(71, 181, 228, 1)"],
["rgba(119, 122, 253, 1)", "rgba(78, 81, 239, 1)"],
["rgba(44, 124, 245, 1)", "rgba(0, 72, 181, 1)"],
["rgba(252, 86, 89, 1)", "rgba(182, 51, 54, 1)"],
["rgba(242, 155, 118, 1)", "rgba(225, 128, 86, 1)"],
]
},
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:1
},
series:{ //跟在柱子后的value，且不是在最上方的时候
type:Object,
default:()=>{
return{
show:true, //主子上方跟的值
color:'#B8C5D2',
fontSize:12,
distance:5, //文字距离
// symbol:'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', //带曲线的三角,triangle是三角形
symbol:'triangle'
}
}
},
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:['活力邻里'],
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]
}
}
},
legend:{ //legend的相关字段
type:Object,
default:()=>{
return{
show:false,
type:'roundRect', //circle圆形，rect矩形，roundRect圆角矩形，triangle三角形，diamond菱形，pin，arrow箭头，square正方形，pin雨滴
itemWidth:15,
itemHeight:10,
itemGap:15,
fontSize:12,
color:'#ffffff'
}
}
},
},
data(){
return{
surveyInit:'',
BgDataData:[],
colorsLegend:[]
}
},
methods:{
initMoreColorZhu(){
let that=this;
var typeData = this.dataObj.name
var xData = that.dataObj.xData,yData = [], maxData = [],circleData = [],colorsLegend = [];
var squares = new Array();
for(var v = 0; v < typeData.length; v++){
//依次创建数组
squares[v] = new Array();
squares[v] = that.dataObj['data'+(v+1)]
}
//左侧name的展示
var max=Math.max.apply(null, yData); //最大值
yData.forEach(item=>{
maxData.push(max) //最大值组成的数组
})
//创建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: 'pictorialBar',
barWidth:that.barWidth,
// barCategoryGap: '10%',
// stack: '总量',
barCategoryGap: "60%",
barGap:i!=0?'-60%':'0',
symbol:that.series.symbol,
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){
that.colorsLegend.push(that.colors[params.dataIndex])
return that.colors[params.dataIndex]
}else{
that.colorsLegend.push(that.colors[params.componentIndex])
return that.colors[params.componentIndex]
}
}else{
// console.log(that.isSingleColor,params)
//渐变颜色下的赋值
if(that.isSingleColor&&typeData.length==1){
that.colorsLegend.push(that.colorsJian[params.dataIndex])
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{
that.colorsLegend.push(that.colorsJian[params.componentIndex-1])
return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: that.jianLength,
color: that.colorsJian[params.componentIndex-1][0]// 0% 处的颜色
}, {
offset: 1,
color: that.colorsJian[params.componentIndex-1][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,
},
legend: {
show:that.legend.show,
// icon: that.legend.type,
itemWidth: that.legend.itemWidth,
itemHeight: that.legend.itemHeight,
itemGap: that.legend.itemGap,
data: typeData,
// right: 'center',
textStyle: {
fontSize: that.legend.fontSize,
color: that.legend.color
}
},
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
},
},
// triggerEvent: true,
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,
}
}
}],
// 滑动条
dataZoom:[{
type:'slider',
show:false,
realtime:true,
startValue:0,
endValue:that.showNum,
}],
series:creatArr(squares)
};
that.surveyInit.setOption(option);
//滚动
var key = 0;
setInterval(function() {
// 通过动态改变数据实现不停循环播放
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);
},
},
watch:{
width:function(){
this.surveyInit.resize()
},
},
mounted(){
// 新建一个promise对象
let newPromise = new Promise((resolve) => {
resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
// 此dom为echarts图标展示dom
this.initMoreColorZhu()
})
},
}
</script>