由于 echarts 官网并没有 3d柱状图的案例,所以我自己写了一个在项目中用到的
效果图
颜色内容等都可以参考 echarts 官网进行自定义调整
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D柱状图</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
<div style="width: 100%;height: 700px;background-color: black;" id="echart"></div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
js 代码
var xData = ['柱子1','柱子2','柱子3','柱子4','柱子5'];
var yData = [120,220,320,123,223];
const echart = echarts.init(document.getElementById("echart"));
function getOptionLtZzt(xData,yData,unit) {
var option = {
title: {
text: '单位:'+unit,
textStyle:{
color: 'rgba(255,255,255,.8)',
fontSize: 12
}
},
toolbox: { // !!!
show: true,
feature: {
saveAsImage: {
name: name,
title: "保存为图片",
icon: 'path://M 384 448 V 110 h 230 v 310 h 180 l -300 324 l -324 -324 h 180 Z m -170 450 h 600 v 60 H 140 v -60 Z',
iconStyle: {
color: '#fff'
}
}
}
},
graphic: [
{
type: 'group',
// rotation: Math.PI / 2,
bounding: 'raw',
right:"center",
top: 20,
z: 100,
children: [
{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
fill: '#253042',
text: name,
font: 'bold 16px sans-serif'
}
}
]
},
],
tooltip: {
show: true,
trigger: "item",
formatter:'{a} : {c}'
},
grid: {
top: "40",
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
axisTick: {
show: false
},
axisLabel:{
interval:0,
rotate: 0,
formatter: function (value) {
if (value.length > 3) {
return `${value.slice(0, 3)}...`;
}
return value;
}
},
data: xData
},
// legend: {
// data: getlegendData(x),
// right: '15',
// top: '18',
// icon: 'rect',
// itemHeight: 10,
// itemWidth: 10,
// textStyle: {
// color: '#000'
// }
// },
yAxis: {
type: 'value',
//分格线
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
}
},
series: getSeriesData(yData)
};
return option;
}
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 19, //柱状图宽
zWidth: 8, //阴影折角宽
zHeight: 4 //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2, shape.y];
ctx.moveTo(p0[0], p0[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.lineTo(p0[0], p0[1]);
ctx.closePath();
}
});
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 18,
zWidth: 15,
zHeight: 8
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2, shape.y];
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
];
const p7 = [
shape.x - shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight
];
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p5[0], p5[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p7[0], p7[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath();
}
});
function getSeriesData(seriesData) {
const data = [];
seriesData.forEach((item, index) => {
data.push(
{
type: 'custom',
name: xData[index],
renderItem: function (params, api) {
return getRenderItem(params, api);
},
data: item.toString().split(),
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
},
},
}
)
})
return data
}
function getRenderItem(params, api) {
const index = params.seriesIndex;
let location = api.coord([api.value(0) + index, api.value(1)]);
var extent = api.size([0, api.value(1)]);
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}
]
};
}
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);
const colors = [
[
{ offset: 0, color: 'rgba(109, 213, 250, 1)' },
{ offset: 1, color: 'rgba(109, 213, 250, 0.58)' },
],
[
{ offset: 0, color: 'rgba(34, 193, 195, 1)' },
{ offset: 1, color: 'rgba(34, 193, 195, 0.58)' },
],
[
{ offset: 0, color: 'rgba(201, 214, 255, 1)' },
{ offset: 1, color: 'rgba(201, 214, 255, 0.58)' },
],
[
{ offset: 0, color: 'rgba(174, 182, 255, 1)' },
{ offset: 1, color: 'rgba(174, 182, 255, 0.58)' },
],
[
{ offset: 0, color: 'rgba(185,119, 255, 1)' },
{ offset: 1, color: 'rgba(185, 119, 255, 0.58)' },
]
];
echart.setOption(getOptionLtZzt(xData,yData,"个"));