<!--
⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
var data = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
// Parametric curve
for (var t = 0; t < 25; t += 1) {
var y = t;
var z = 25- t + 2.0 * Math.sin(75 * t);
var z1 =25- t + 2.0 * Math.random().toFixed(2);
var z2 =25- t + 2.0 * Math.random().toFixed(2);
data.push([y, 1, z]);
data1.push([y, 4, z1]);
data2.push([y, 2, z2 / 2]);
data3.push([y, 2, z2]);
data4.push([y, 2, z2 / 2]);
}
console.log(data.length);
option = {
tooltip: {},
backgroundColor: '#00599f',
// visualMap: {
// show: false,
// dimension: 2,
// min: 0,
// max: 30,
// inRange: {
// color: [
// '#313695',
// '#4575b4',
// '#74add1',
// '#abd9e9',
// '#e0f3f8',
// '#ffffbf',
// '#fee090',
// '#fdae61',
// '#f46d43',
// '#d73027',
// '#a50026'
// ]
// }
// },
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value',
splitLine: {
show: false
}
},
zAxis3D: {
type: 'value'
},
grid3D: {
viewControl: {
projection: 'orthographic'
},
axisLine: {
lineStyle: { color: '#ffffff88' }
},
// axisPointer: {
// lineStyle: { color: '#ffffff33' }
// },
light: {
main: {
shadow: true,
quality: 'ultra',
intensity: 1.5
}
}
},
series: [
{
type: 'line3D',
data: data,
lineStyle: {
width: 4
}
},
{
type: 'line3D',
data: data1,
lineStyle: {
width: 4
}
},
{
type: 'line3D',
data: data3,
lineStyle: {
width: 4
}
},
{
type: 'bar3D',
barSize: [2, 2],
data: data2.map(function (item) {
return {
value: [item[0], item[1], item[2]]
};
}),
shading: 'color',
label: {
show: false,
fontSize: 16,
borderWidth: 1
},
itemStyle: {
color: '#e5d856',
opacity: 0.6
},
stack: 'stack',
// shading: 'lambert',
emphasis: {
label: {
fontSize: 20,
color: '#900'
},
itemStyle: {
color: '#900'
}
}
},
{
type: 'bar3D',
barSize: [2, 2],
data: data4.map(function (item) {
return {
value: [item[0], item[1], item[2]]
};
}),
shading: 'color',
label: {
show: false,
fontSize: 16,
borderWidth: 1
},
itemStyle: {
color: '#00c4ec',
opacity: 0.6
},
stack: 'stack',
// shading: 'lambert',
emphasis: {
label: {
fontSize: 20,
color: '#900'
},
itemStyle: {
color: '#900'
}
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
