echarts实现3D柱状图（视觉层面）根据博主改编
https://blog.csdn.net/weixin_57798646/article/details/131067725
这是原贴
在这个基础上我需要实现
一根柱子
代码如下
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf8">
</head>
<body style="height: 100%; margin: 0">
<div id="litiBar1" style="height:100%;background-color: #000;"></div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
<script type="text/javascript">
//组织数据
let setData = function (data, constData, showData) {
data.filter(function (item) {
if (item) {
constData.push(1);
showData.push(item);
} else {
constData.push(0);
showData.push({
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
});
}
});
}
//组织颜色
let setColor = function (colorArr) {
let color = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
/* 此处决定阴暗面 若为横向柱状图则x,y轴调换
x: 0,
x2: 0,
y: 0,
y2: 1, */
colorStops: [{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
};
return color
}
var vehicle = [45, 25, 48, 62, 10]
var controlBall = [0, 0, 0, 0, 0]
var barWidth = 220//顶部组件的宽度
;//上边的宽度
var constData1 = [];
var showData1 = [];
var constData2 = [];
var showData2 = [];
setData(vehicle, constData1, showData1)
var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
// var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
var color1 = setColor(colorArr1)
// var color2 = setColor(colorArr2)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
bottom: '15%'
},
xAxis: {
type: 'category',
axisLabel: {
color: '#A2BCC9',
fontSize: 16
},
offset: 30,
axisLine: {
show: false,
},
axisTick: {
show: false
},
data: ['0-18', '18-30', '30-50', '50-65', '>65']
},
yAxis: {
type: 'value',
axisLabel: {
show: false
},
axisLine: {
show: false,
},
splitLine: {
show: false,
}
},
series: [{
z: 1,
type: 'bar',
name: '人员数量',
barGap: "15%", //相邻柱子间距
itemStyle: {
borderRadius: [0, 0, 0, 0],//柱子四周圆角
color: color1//柱子左右颜色（深，浅）
},
data: vehicle //Y轴上的高度
},
// ---------------------------------------------
{
z: 2,
name: '人员数量',
type: "pictorialBar",
data: constData1,//此数据对应底部组件
symbol: "diamond",//底部组件形状，不写默认为椭圆
symbolOffset: [0, 15],//与柱子的偏移角度[左边偏移，上下偏移]
symbolSize: [210, 30],//底面[宽，高]
itemStyle: {
normal: {
color: color1//底面左右颜色（深，浅）
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: '人员数量',
label: { // 在这里明确设置 label 配置
show: true,
position: 'top',
color: '#DFEEFA',
distance: 20,
textStyle: {
fontSize: 16 // 设置图例的字体大小
},
},
type: "pictorialBar",
symbolPosition: "end",
data: showData1,//此数据对应顶部组件
symbol: "diamond",
symbolOffset: [0, -10],//顶部组件的左边偏移数值和右边偏移数值
symbolSize: [barWidth - 10, (20 * (barWidth - 4)) / barWidth],//顶部组件[宽，高]
itemStyle: {
normal: {
/* borderColor: colorArr1[2],
borderWidth: 2, */ //加上棱角分明
color: colorArr1[2]
},
},
tooltip: {
show: false,
},
},
]
}
let chart1 = echarts.init(document.querySelector("#litiBar1"), null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
// chart1.setOption(option)
if (option && typeof option === 'object') {
chart1.setOption(option);
}
window.addEventListener('resize', chart1.resize);
</script>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_41621686/article/details/142631377
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！