let colorList = ["#10DADA", "#F7E439", "#0371BA", "#9797F4", "#15AEE6", "#73A373", "#73B9BC", "#7289AB", "#BCAC74", "#58ABD8"]
let data = [
{
JLDWMC: "辆",
NAME: "车流量",
X: "2023-02-02",
Y: 745,
name: "2023-02-02",
value: 745
},
{
JLDWMC: "辆",
NAME: "车流量",
X: "2023-02-01",
Y: 426,
name: "2023-02-01",
value: 426
},
{
JLDWMC: "辆",
NAME: "车流量",
X: "2023-01-31",
Y: 970,
name: "2023-01-31",
value: 970
},
{
JLDWMC: "辆",
NAME: "车流量",
X: "2023-01-30",
Y: 140,
name: "2023-01-30",
value: 140
},
{
JLDWMC: "辆",
NAME: "车流量",
X: "2023-01-29",
Y: 80,
name: "2023-01-29",
value: 80
}
]
//拼轴显示和数据的数组
let xAxisText = []
let dataList = []
data.forEach(item => {
xAxisText.push(item.name)
dataList.push(item)
})
//从这里开始 创建自定义图形 长方体正面
let MyCubeRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 100, // 长方体宽
zWidth: 8, // 阴影折角宽
zHeight: 4 //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x, shape.y];
const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
ctx.moveTo(p0[0], p0[1]) //0
ctx.lineTo(p1[0], p1[1]) //1
ctx.lineTo(p2[0], p2[1]) //2
ctx.lineTo(p3[0], p3[1]) //3
ctx.lineTo(p4[0], p4[1]) //4
ctx.lineTo(p0[0], p0[1]) //0
ctx.closePath()
}
})
//创建第二个自定义图形 -- 长方体的上面和侧面
let MyCubeShadow = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 100,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p5[0], p5[1]); //5
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p4[0], p4[1]); //4
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p7[0], p7[1]); //7
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p4[0], p4[1]); //4
ctx.closePath();
}
});
echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
option = {
//你的代码
backgroundColor: 'rgb(11, 33, 58)', // 背景颜色
color: ["#10DADA", "#F7E439", "#0371BA", "#9797F4", "#15AEE6", "#73A373", "#73B9BC", "#7289AB", "#BCAC74", "#58ABD8"],
endColor: ["#10DADA", "#F7E439", "#0371BA", "#9797F4", "#15AEE6", "#73A373", "#73B9BC", "#7289AB", "#BCAC74", "#58ABD8"],
legend: {
show: true, //图例是否显示
type: 'scroll', //图例展示类型
align: 'auto', //图例和文本的对齐
bottom: 10, // 图例下侧距离
left: 'auto', //图例左侧距离
right: 'auto', //图例右侧距离
top: 'auto', //图例上侧距离
orient: 'horizontal', //布局朝向
icon: 'circle', // 图例形状
itemGap: 10, // 图例间距
itemWidth: 25, // 标记宽度
itemHeight: 14, //标记高度
textStyle: {
color: '#ffffff',
fontFamily: 'sans-serif', //字体系列
fontSize: 12, //字体大小
},
itemStyle: {
color: 'inherit' //图例颜色是否默认
},
data: null
}, // 图例的设置
grid: {
show: false, //是否显示直角坐标系网格
// left:0,
// top:0,
right: '10%',
// bottom:60, //坐标位置
// width:'auto' 坐标大小
backgroundColor: 'transparent'
}, //坐标的设置
tooltip: {
show: true, //是否显示提示框组件
triggerOn: 'mousemove', //触发条件
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
type: 'solid'
}
},
backgroundColor: 'rgba(43, 49, 56, 0.5)',
borderColor: "rgba(43, 49, 56, 0.5)",
borderWidth: 0,
padding: 5,
textStyle: {
color: "#ffffff"
}
}, //浮动提示框
title: {
show: true,
text: "", //主标题文本
// subtext: "Sub Title",
left: "center",
top: "center",
backgroundColor: 'transparent', //背景颜色
borderColor: '#cccccc', //边框颜色
borderWidth: 0,//边框宽度
borderRadius: 0, //圆角半径
textStyle: {
color: '#333333',
fontSize: 18,
fontFamily: 'sans-serif',
fontWeight: 'bolder',
fontStyle: 'normal',
// lineHeight:12,
// width:100,
// height:50,
overflow: 'none',
},
zlevel: 2, //为了让条形占比图的 title标题在最上面显示
z: 10,
text: '3D柱状图'
},
xAxis: {
type: 'category',
data: xAxisText,
show: true, //是否显示X轴
type: 'category',
position: 'bottom', //X轴位置
offset: 0,//X轴的位置偏移量
nameGap: 15, //坐标轴名称与坐标轴间的距离
nameRotate: 0, //旋转角度
inverse: false, //是否是反向坐标轴
name: '',//名称
nameLocation: 'end',//名称位置
nameTextStyle: {
color: '',//字体颜色
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //字体大小
align: 'center', //水平对齐方式
verticalAlign: 'middle', //垂直对齐方式
lineHeight: 20,//字体行高
backgroundColor: 'transparent', //背景色
borderColor: '', //边框颜色
borderWidth: 0, //边框宽度
borderType: 'solid', //边框类型
borderRadius: 0,//圆角设置
padding: 0,//内边距
},
axisLine: { //坐标轴轴线相关设置
show: true,
symbol: 'none', //轴线两端的显示方式
lineStyle: {
color: '#ffffff', // 轴线颜色
width: 1, //轴线宽度
type: 'solid', //轴线类型
shadowBlur: 0,//阴影模糊大小
shadowColor: "", // 阴影模糊颜色
shadowOffsetX: 0, //水平偏移量
shadowOffsetY: 0 // 垂直偏移量
},
symbolSize: [10, 15], //两端箭头的大小
symbolOffset: [0, 0], //两端箭头的偏移量
},
splitArea: {
show: true, //是否显示分割区域
interval: 0, //分割区域间隔
areaStyle: {
color: ["rgba(250,250,250,0)", "rgba(250,250,250,0.05)"],
shadowBlur: 0,//阴影模糊大小
shadowColor: "", // 阴影模糊颜色
shadowOffsetX: 0, //水平偏移量
shadowOffsetY: 0 // 垂直偏移量
}, //分割区域颜色
},//坐标轴的分割区域
axisTick: {
show: true, //是否显示坐标刻度
alignWidthLabel: false, //刻度线与标签是否对齐
interval: 0, //刻度线显示间隔
inside: false,//刻度线是否朝内
length: 5, //刻度长度
lineStyle: {
color: '', //刻度颜色
width: 1, //刻度宽度
type: 'solid', // 刻度类型
shadowBlur: 0,//阴影模糊大小
shadowColor: "", // 阴影模糊颜色
shadowOffsetX: 0, //水平偏移量
shadowOffsetY: 0 // 垂直偏移量
}
},//坐标轴刻度设置
axisLabel: {
show: true, // 是否显示刻度标签
interval: 0, //标签间隔
inside: false, //标签是否朝内
rotate: 0, //标签旋转角度
margin: 8, //标签与轴线间的距离
hideOverlap: false, //是否隐藏重叠的标签
color: '', //标签颜色
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //字体大小
align: 'center', //文字水平对齐方式
verticalAlign: "middle", //垂直对齐方式
lineHeight: 12, //行高
backgroundColor: 'transparent',//背景色
borderColor: '', //边框颜色
borderWidth: 0, //边框宽度
borderType: "solid", // 边框类型
borderRadius: 0,//圆角设置
padding: 0,//内边距
}, //坐标轴刻度标签的设置
splitLine: {
show: false, //是否显示分割线
interval: 0, //分割线间隔
lineStyle: {
color: '#cccccc', //分割线颜色
width: 1, //宽度设置
type: 'solid', //分割线类型
}, //分割线设置
}, //坐标分割线的设置
axisPointer: {
show: true, //是否显示坐标指示器
type: 'shadow', //指示类型
lineStyle: {
color: '#555', // 颜色
width: 1, //宽度
type: 'solid', // 类型
}, //当指示线类型为line时有效
shadowStyle: {
color: 'rgba(150, 150, 150, 0.3)'
},//当指示线类型为 shadow 时有效
label: {
show: false, //是否显示提示器文本标签
margin: 3, //与轴线的距离
color: '#fff', //文字颜色
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //大小
lineHeight: 12, //行高
padding: 5, //内边距
backgroundColor: 'auto', //背景色
borderColor: 'auto', //边框颜色
borderWidth: 0,
},
}
},
yAxis: {
type: 'value',
show: true, // 是否显示Y轴
type: 'value',
position: 'left', // Y轴位置
offset: 0, //Y轴偏移量
nameGap: 15, //坐标轴名称与坐标轴间的距离
nameRotate: 0, //旋转角度
inverse: false, //是否是反向坐标轴
name: '',//名称
nameLocation: 'end',//名称位置
nameTextStyle: {
color: '',//字体颜色
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //字体大小
align: 'center', //水平对齐方式
verticalAlign: 'middle', //垂直对齐方式
lineHeight: 20,//字体行高
backgroundColor: 'transparent', //背景色
borderColor: '', //边框颜色
borderWidth: 0, //边框宽度
borderType: 'solid', //边框类型
borderRadius: 0,//圆角设置
padding: 0,//内边距
},
axisLine: { //坐标轴轴线相关设置
show: true,
symbol: 'none', //轴线两端的显示方式
lineStyle: {
color: '#ffffff', // 轴线颜色
width: 1, //轴线宽度
type: 'solid', //轴线类型
shadowBlur: 0,//阴影模糊大小
shadowColor: "", // 阴影模糊颜色
shadowOffsetX: 0, //水平偏移量
shadowOffsetY: 0 // 垂直偏移量
},
symbolSize: [10, 15], //两端箭头的大小
symbolOffset: [0, 0], //两端箭头的偏移量
},
axisTick: {
show: true, //是否显示坐标刻度
alignWidthLabel: false, //刻度线与标签是否对齐
interval: 0, //刻度线显示间隔
inside: false,//刻度线是否朝内
length: 5, //刻度长度
lineStyle: {
color: '', //刻度颜色
width: 1, //刻度宽度
type: 'solid', // 刻度类型
shadowBlur: 0,//阴影模糊大小
shadowColor: "", // 阴影模糊颜色
shadowOffsetX: 0, //水平偏移量
shadowOffsetY: 0 // 垂直偏移量
}
},//坐标轴刻度设置
axisLabel: {
show: true, // 是否显示刻度标签
interval: 0, //标签间隔
inside: false, //标签是否朝内
rotate: 0, //标签旋转角度
margin: 8, //标签与轴线间的距离
hideOverlap: false, //是否隐藏重叠的标签
color: '', //标签颜色
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //字体大小
align: 'center', //文字水平对齐方式
verticalAlign: "middle", //垂直对齐方式
lineHeight: 12, //行高
backgroundColor: 'transparent',//背景色
borderColor: '', //边框颜色
borderWidth: 0, //边框宽度
borderType: "solid", // 边框类型
borderRadius: 0,//圆角设置
padding: 0,//内边距
}, //坐标轴刻度标签的设置
splitLine: {
show: false, //是否显示分割线
interval: 0, //分割线间隔
lineStyle: {
color: '#cccccc', //分割线颜色
width: 1, //宽度设置
type: 'solid', //分割线类型
}, //分割线设置
}, //坐标分割线的设置
splitArea: {
show: true, //是否显示分割区域
interval: 0, //分割区域间隔
areaStyle: {
color: ["rgba(250,250,250,0)", "rgba(250,250,250,0.05)"],
shadowBlur: 0,//阴影模糊大小
shadowColor: "", // 阴影模糊颜色
shadowOffsetX: 0, //水平偏移量
shadowOffsetY: 0 // 垂直偏移量
}, //分割区域颜色
},//坐标轴的分割区域
axisPointer: {
show: false, //是否显示坐标指示器
type: 'line', //指示类型
label: {
show: false, //是否显示提示器文本标签
margin: 3, //与轴线的距离
color: '#fff', //文字颜色
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //大小
lineHeight: 12, //行高
padding: 5, //内边距
backgroundColor: 'auto', //背景色
borderColor: 'auto', //边框颜色
borderWidth: 0,
},
lineStyle: {
color: '#555', // 颜色
width: 1, //宽度
type: 'solid', // 类型
}, //当指示线类型为line时有效
shadowStyle: {
color: 'rgba(150, 150, 150, 0.3)'
},//当指示线类型为 shadow 时有效
}
},
tooltip: {
show: true, //是否显示提示框组件
triggerOn: 'mousemove', //触发条件
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
type: 'solid'
}
},
backgroundColor: 'rgba(43, 49, 56, 0.5)',
borderColor: "rgba(43, 49, 56, 0.5)",
borderWidth: 0,
padding: 5,
textStyle: {
color: "#ffffff"
},
formatter: (params) => {
console.log(params, '==params')
let str = '<div>' + params[0].name + '</div>' + params[0].marker + params[0].data.NAME + ": " + params[0].value + params[0].data.JLDWMC
return str
}
},
series: [
{
type: 'bar',
colorBy: 'series', // 取色策略
legendHoverLink: true, // 是否高亮
showBackground: false, //是否显示柱状图背景色
backgroundStyle: {
color: 'rgba(180,180,180,0.2)', //背景颜色
borderColor: '#000',//描边颜色
borderWidth: 0, //边框宽度
borderType: 'solid', //边框类型
borderRadius: 0, //圆角半径
},//柱状图背景色的设置
label: {
show: false, //是否显示文本标签
rotate: 0, //旋转角度
offset: [0, 0], //文字
color: '#0a0a0a', //数值显示颜色
position: 'left', // 数值显示位置
fontWeight: 400, //字体粗细
fontFamily: 'sans-serif', //字体类型
fontSize: 12, //字体大小
lineHeight: 12, //行高
backgroundColor: 'transparent', // 背景色
borderColor: 'transparent', //边框颜色
borderWidth: 0, //边框宽度
borderType: 'solid', //边框类型
borderRadius: 0, //圆角
padding: 0 //内边距
},// 对文本标签的设置
itemStyle: {
color: 'transparent',
},
data: data
},
{
name: data[0].NAME,
type: 'custom',
renderItem: (params, api) => {
let location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [
{
type: 'MyCubeRect',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: colorList[params.dataIndex % colorList.length]
} //api.style() 继承原本样式
},
{
type: 'MyCubeShadow',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: colorList[params.dataIndex % colorList.length],
text: '' //继承原本样式的基础上将label清空，如果不清空生成的图会显示两个重叠的label
}
}
]
}
},
data: dataList,
}
]
};