代码如下,单个的调第一个方法,多个柱状的调第二个方法,具体情况修改参数或者二次开发即可
//3d柱状图
export function getEcharts3DBar (xAxisData:string[]=['name1','name2','name3'], data:number[]=[1,2,3], colorObj:IBaseObject={
topStartColor:'rgba(236, 191, 55)',
topEndColor:'rgba(236, 191, 55)',
startColor:'rgba(71, 57, 30)',
endColor:'rgba(236, 191, 55)',
bottomStartColor:'rgba(236, 191, 55)',
bottomEndColor:'rgba(236, 191, 55)'
}) {
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: 'shadow'
},
backgroundColor:'rgba(255,255,255,.1)',
borderColor:'rgba(40, 60, 74)',
textStyle:{
align:'left',
fontSize: 10,//字体大小
color:'#fff',
},
formatter: function (params) {
var str = params[0].axisValue + ":" +params[0].value;
return str;
},
},
grid: {
left: "3%", //图表距边框的距离
right: "3%",
top: "15%",
bottom: "5%",
containLabel: true,
},
xAxis: {
data: xAxisData,
axisTick: {
show: false,
},
axisLabel: {
color: '#cae2ee' // 设置Y轴文字颜色为蓝色
}
},
yAxis: {
type: 'value',
splitLine: {
show: 'ture', // 是否显示y轴分割线
interval: 'auto', // 坐标轴分隔线的显示间隔
lineStyle: {
color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
width: 1, // 分隔线线宽
type: 'dashed', // 线的类型
opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
}
},
axisLabel: {
color: '#cae2ee' // 设置Y轴文字颜色为蓝色
}
},
series: [
// 数据低下的圆片
{
name: '',
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [16,10], // 宽,高
symbolOffset:[0,2],// 左 上
symbolPosition: 'start',
z: 0,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorObj.bottomStartColor },
{ offset: 1, color: colorObj.bottomEndColor }
]);
}
},
data: data
},
// 数据的柱状图
{
name: '',
type: 'bar',
barWidth: 8, // 柱条的宽度,不设时自适应。
showSymbol: false,
hoverAnimation: false,
data: data,
itemStyle: {
// normal: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorObj.startColor },
{ offset: 1, color: colorObj.endColor }
]);
},
borderRadius:[1,0,0,100],
// }
},
},
{
name: '',
type: 'bar',
barWidth: 8, // 柱条的宽度,不设时自适应。
barGap: '0', // 不同系列的柱间距离
data: data,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorObj.startColor },
{ offset: 1, color: colorObj.endColor }
]);
},
borderWidth: 0.1,
borderColor:'#B0E1FF',
borderRadius:[0,2,100,0]
},
},
// 数据顶部的样式
{
name: '',
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [16,9],
symbolOffset:[0,-4],
symbolPosition: 'end',
z: 3,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorObj.topStartColor },
{ offset: 1, color: colorObj.topEndColor }
]);
},
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
textStyle: {
fontSize: '12',
color: '#B0E1FF'
},
offset:[0,-2]
}
},
data: data
},
]
};
}
export function getEcharts3DBar1 (obj) {
//obj的格式
/*obj:{
xAxisData: ['2024-07-12','2024-07-13','2024-07-14'],
data:{
data1:{//劳务人员
name:'劳务人员',
offset:[-8,-2],
colorObj: {
topStartColor:'rgba(236, 191, 55)',
topEndColor:'rgba(236, 191, 55)',
startColor:'rgba(71, 57, 30)',
endColor:'rgba(236, 191, 55)',
bottomStartColor:'rgba(236, 191, 55)',
bottomEndColor:'rgba(236, 191, 55)'
},
data:[0,0,0],
},
data2:{//岗位人员
name:'岗位人员',
offset:[8,-2],
colorObj: {
topStartColor:'rgba(21, 205, 217)',
topEndColor:'rgba(10, 72, 140)',
startColor:'rgba(10, 72, 140)',
endColor:'rgba(53, 152, 212)',
bottomStartColor:'rgba(53, 152, 212)',
bottomEndColor:'rgba(53, 152, 212)'
},
data:[0,0,0],
},
}
}*/
let series = [],legendData=[],
circle1=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data1.colorObj.startColor}`,
circle2=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data2.colorObj.startColor}`
for(let key in obj.data){
legendData.push({
name: obj.data[key].name,
icon: 'roundRect',
itemStyle: {
color: obj.data[key].colorObj.startColor
}
})
series.push( // 数据底部的圆片
{
name: obj.data[key].name,
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [16,10], // 宽,高
symbolOffset:obj.data[key].offset,// 左 上
symbolPosition: 'start',
z: 0,
itemStyle: {
color: (val) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: val.data?obj.data[key].colorObj.bottomStartColor:'transparent' },
{ offset: 1, color: val.data?obj.data[key].colorObj.bottomEndColor:'transparent' }
]);
}
},
data: obj.data[key].data
},
// 数据的柱状图
{
name: obj.data[key].name,
type: 'bar',
barWidth: 8, // 柱条的宽度,不设时自适应。
showSymbol: false,
hoverAnimation: false,
symbolOffset:obj.data[key].offset,// 左 上
data: obj.data[key].data,
itemStyle: {
color: (val) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color:val.data?obj.data[key].colorObj.startColor:'transparent' },
{ offset: 1, color:val.data?obj.data[key].colorObj.endColor:'transparent' }
]);
},
// borderRadius:[1,0,0,100],
},
},
{
name: obj.data[key].name,
type: 'bar',
barWidth: 8, // 柱条的宽度,不设时自适应。
symbolOffset:obj.data[key].offset,// 左 上
barGap: '0', // 不同系列的柱间距离
data: obj.data[key].data,
itemStyle: {
color: (val) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: val.data?obj.data[key].colorObj.startColor:'transparent' },
{ offset: 1, color: val.data?obj.data[key].colorObj.endColor:'transparent' }
]);
},
borderWidth: 0.1,
borderColor:'#B0E1FF',
// barBorderRadius:[0,2,100,0]
},
},
// 数据顶部的样式
{
name: obj.data[key].name,
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [16,9],
symbolOffset:obj.data[key].offset,// 左 上
symbolPosition: 'end',
z: 3,
itemStyle: {
color: (val) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: val.data?obj.data[key].colorObj.topStartColor:'transparent' },
{ offset: 1, color: val.data?obj.data[key].colorObj.topEndColor:'transparent' }
]);
},
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
textStyle: {
fontSize: '12',
color: '#B0E1FF'
},
offset:[0,-2]
}
},
data: obj.data[key].data
},
)
}
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor:'rgba(255,255,255,.1)',
borderColor:'rgba(40, 60, 74)',
textStyle:{
align:'left',
fontSize: 10,//字体大小
color:'#fff',
},
formatter: function (params) {
var str = "<div>"+params[0].axisValue+"</div>";
str += "<br/>" + "<div>" + `<span style='${circle1}' >` + "</span>" + params[0].seriesName + ":" +params[0].value+"</div>";
str += "<br/>" + "<div>"+ `<span style='${circle2}' >` + "</span>" + params[5].seriesName + ":" + params[5].value+"</div>";
return str;
},
},
grid: {
left: "3%", //图表距边框的距离
right: "3%",
top: "15%",
bottom: "5%",
containLabel: true,
},
xAxis: {
data: obj.xAxisData,
axisTick: {
show: false,
},
axisLabel: {
color: '#cae2ee' // 设置Y轴文字颜色为蓝色
}
},
yAxis: {
type: 'value',
splitLine: {
show: 'ture', // 是否显示y轴分割线
interval: 'auto', // 坐标轴分隔线的显示间隔
lineStyle: {
color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
width: 1, // 分隔线线宽
type: 'dashed', // 线的类型
opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
}
},
axisLabel: {
color: '#cae2ee' // 设置Y轴文字颜色为蓝色
}
},
legend:{
y: 'top',
icon:'rectangle',
itemStyle:{
// color:[colorObj.topStartColor,colorObj1.topStartColor]
},
textStyle:{
color:'#fff'
},
data:legendData,
},
series:series
};
}