棱柱图组件
可滚动的棱柱图，包含文字展示的位置，是否可以多个还是单个，颜色的多个单个，有无背景等等：
<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:20
},
//grid的设置修改
grid:{
type:Object,
default:()=>{
return{
bottom:40,
top:30,
left:30,
right:20
}
}
},
//xAxis相关变量
xAxis:{
type:Object,
default:()=>{
return{
max:5,
axisLineShow:true,
axisLineColor:'rgba(188, 198, 207, 0.4)',
axisLabelColor:'#B8C5D2',
axisLabelSize:12,
axisLabelRotate:0,
splitLineShow:false,
splitLineColor:'rgba(255,255,255,0.1)',
splitLineType:'',
axisLabelColorLabel:'#B8C5D2', //居于背景最上方的时候的文字颜色
axisLabelSizeLabel:12,
axisLabelRotateLabel:0,
axisLabelShowLabel:true, //这里是展示的相关的值是否在最上方
}
}
},
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,
}
}
},
showNum:{ //开始展示几条数据
type:Number,
default:4
},
jianLength:{ //颜色渐变从哪里开始，默认是0.2，一般设置为1
type:Number,
default:1
},
series:{ //跟在柱子后的value，且不是在最上方的时候
type:Object,
default:()=>{
return{
show:false,
color:'#B8C5D2',
fontSize:12,
distance:5, //文字距离
}
}
},
bgData:{ //柱状图背景
type:Object,
default:()=>{
return{
show:false,
bgColor:'rgba(14,54,126,0.6)',
bgTop:'rgba(14,54,126,1)'
}
}
},
isShowBg:{ //是否展示背景
type:Boolean,
default:false
},
isSingleColor:{ //是否展示是一个颜色展示
type:Boolean,
default:false
},
//返回数据
dataObj:{ //所需要的数值组成的对象
type:Object,
default:()=>{
return{
name:['关注','关爱','heihie'],
// name:['关注'],
xData:['锦华社区','康洋社区','阳光社区','府前社区','金水社区','丽日社区','水城社区','新胜社区','明月社区','恒大社区'],
data1:[30,50,30,40,20,70,35,45,65,40],
data2:[20,15,43,22,38,10,55,21,33,18],
data3:[30,50,30,40,20,70,35,45,65,40],
singleColor:["rgba(44, 124, 245, 1)", "rgba(0, 72, 181, 1)"], //只有一种颜色展示的时候
colors1:[
["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)"],
],
colors3:[
["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)"],
],
colors2:[
["rgba(242, 155, 118, 1)", "rgba(225, 128, 86, 1)"],
["rgba(44, 124, 245, 1)", "rgba(0, 72, 181, 1)"],
["rgba(252, 86, 89, 1)", "rgba(182, 51, 54, 1)"],
["rgba(119, 122, 253, 1)", "rgba(78, 81, 239, 1)"],
["rgba(61, 136, 227, 1)", "rgba(71, 181, 228, 1)"],
["rgba(52, 179, 110, 1)", "rgba(34, 142, 83, 1)"],
["rgba(240, 197, 92, 1)", "rgba(198, 161, 71, 1)"],
["rgba(242, 155, 118, 1)", "rgba(225, 128, 86, 1)"],
["rgba(252, 86, 89, 1)", "rgba(182, 51, 54, 1)"],
["rgba(44, 124, 245, 1)", "rgba(0, 72, 181, 1)"],
],
symbolSize: [20, 10],
}
}
},
},
data(){
return{
surveyInit:'',
BgDataData:[]
}
},
methods:{
initMoreColorZhu(){
let that=this;
//用于数组求和组成新的数组
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)
}
return result
};
var name=this.dataObj.name;
var squares = new Array();var maxData = [],maxNum=0;
for(var v = 0; v < name.length; v++){
//依次创建数组
squares[v] = new Array();
squares[v] = that.dataObj['data'+(v+1)]
//创建最大值
maxNum += Math.max(...that.dataObj['data'+(v+1)])
}
//循环创建相对应的折线的数目，是一条还是两条还是更多
function createArr(squares){
let img = '';
var serArr = [],labelColor;
var arrEvery = new Array();
for(var i = 0;i<squares.length;i++){
//创建最大数组，仅取第一个就行
if(i==0){
squares[0].forEach(item=>{
maxData.push(maxNum+10)
})
}
arrEvery[i] = [
{
type: 'bar',
name: name[i],
type: 'bar',
data: squares[i],
stack: 'zs',
barMaxWidth: 'auto',
barWidth: that.barWidth,
itemStyle: {
color: function(params){
if(that.isSingleColor){
return new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: that.dataObj.singleColor[0]// 0% 处的颜色
}, {
offset: that.jianLength,
color: that.dataObj.singleColor[1] // 100% 处的颜色
}], false)
}else{
return new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: that.dataObj['colors'+(params.componentIndex/2+1)][params.dataIndex][0]// 0% 处的颜色
}, {
offset: that.jianLength,
color: that.dataObj['colors'+(params.componentIndex/2+1)][params.dataIndex][1] // 100% 处的颜色
}], false)
}
}
},
},
{
data: sumArr(squares)[i],
tooltip:{show:false},
type: 'pictorialBar',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: that.dataObj.symbolSize,
zlevel: 2*i+2,
itemStyle: {
normal: {
color:function(params){
if(that.isSingleColor){
return that.dataObj.singleColor[0]
}else{
return that.dataObj['colors'+((params.componentIndex+1)/2)][params.dataIndex][0]
}
},
},
},
label: {
show: that.series.show,
position: 'top',
color: that.series.color,
fontSize: that.series.fontSize,
distance:that.series.distance
},
},
]
var arrBg = [
{
name: '数量',
type: 'bar',
tooltip:{show:false},
barWidth:that.barWidth,
barCategoryGap: '10%',
barGap: '-100%',
z:1,
label: {
show: false,
},
itemStyle: {
barBorderRadius: that.barBorderRadius,
color: that.bgData.bgColor,
},
data: maxData
},
{
data: maxData,
tooltip:{show:false},
type: 'pictorialBar',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: that.series.symbolOffset,
symbolSize: that.series.symbolSize,
zlevel: 2,
itemStyle: {
normal: {
color:that.bgData.bgTop
},
},
label: {
show: false,
},
},
]
}
//这里是循环创建的数组然后合并到一个新数组
arrEvery.forEach(item=>{
item.forEach(self=>{
serArr.push(self)
})
})
if(that.isShowBg){
serArr = serArr.concat(arrBg)
}
return serArr
}
that.surveyInit = that.$echarts.init(document.getElementById(this.histogramId));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
// formatter: "{b} : {c}",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid:this.grid,
// 滑动条
dataZoom:[{
type:'slider',
show:false,
realtime:true,
startValue:0,
endValue:that.showNum,
}],
xAxis: [
{
// type: 'category',
// boundaryGap: false,
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: that.dataObj.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:sumArr(squares)[squares.length-1]
}
],
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:createArr(squares)
};
that.surveyInit.setOption(option);
//滚动
var key = 0;
setInterval(function() {
var aa = that.dataObj.xData.shift();
that.dataObj.xData.push(aa);
var squaresA = new Array(),bb,cc;
for(var v = 0; v < name.length; v++){
//依次创建数组
squaresA[v] = new Array();
squaresA[v] = that.dataObj['data'+(v+1)]
//数值
bb = squaresA[v].shift()
squaresA[v].push(bb);
//颜色
var cc = that.dataObj['colors'+(v+1)].shift()
that.dataObj['colors'+(v+1)].push(cc)
}
// 颜色控制
if(key>that.dataObj.xData.length){key=0}
key++;
that.surveyInit.setOption({
xAxis: [
{ data: that.dataObj.xData,},
{ data:sumArr(squaresA)[squaresA.length-1]}
],
series:createArr(squaresA)
});
}, 3000);
},
},
watch:{
width:function(){
this.surveyInit.resize()
},
},
mounted(){
// 新建一个promise对象
let newPromise = new Promise((resolve) => {
resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
// 此dom为echarts图标展示dom
this.initMoreColorZhu()
})
},
}
</script>
浙公网安备 33010602011771号