<!DOCTYPE html>
<html>
<head>
<title>电</title>
<meta charset="utf-8" />
<style>
::-webkit-scrollbar {
display: none;
}
@font-face {
font-family: SketchRockwell;
/*这里是说明调bai用来的字体名du字*/
src: url("./font/TT0246M_.TTF");
/*这里是字zhi体文件路径*/
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
#main {
width: 100%;
height: 100%;
/* margin: 0 auto; */
}
</style>
</head>
<body>
<div id="main" style="width: 100%; height: 100%"></div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-gl.min.js"></script>
<script src="./js/simplex.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
var data = [];
for (var i = 0; i <= 24; i += 0.5) {
for (var j = 0; j <= 30; j += 0.5) {
var value = Math.abs(noise.noise2D(i / 20, j / 20));
valMax = Math.max(valMax, value);
// valMin = Math.min(valMin, value);
data.push([i, j, value * 200 + 4]);
}
}
return data;
}
var valMin = Infinity;
var valMax = -Infinity;
var data = generateData(2, 0, 100);
console.log(valMin, valMax);
myChart.setOption(
(option = {
visualMap: {
show: false,
min: 2,
max: 150,
inRange: {
color: [
"rgba(49,54,149,0.7)",
"rgba(69,117,180,0.7)",
"rgba(116,173,209,0.7)",
"rgba(171,217,233,0.7)",
"rgba(224,243,248,0.7)",
"rgba(255,255,191,0.7)",
"rgba(254,224,144,0.7)",
"rgba(253,174,97,0.7)",
"rgba(244,109,67,0.7)",
// "rgba(215,48,39,0.7)",
// "rgba(165,0,38,0.7)",
],
},
},
xAxis3D: {
name: "小时",
nameTextStyle: {
fontFamily: "SketchRockwell",
fontSize: 10,
color: "#fff",
},
max: 24,
type: "value",
axisLabel: {
show: true,
fontFamily: "SketchRockwell",
fontSize: 10,
color: "#fff",
},
},
yAxis3D: {
name: "日期",
nameTextStyle: {
fontFamily: "SketchRockwell",
fontSize: 10,
color: "#fff",
},
type: "value",
axisLabel: {
show: true,
fontFamily: "SketchRockwell",
fontSize: 10,
color: "#fff",
},
},
zAxis3D: {
name: "kWh",
nameTextStyle: {
fontFamily: "SketchRockwell",
fontSize: 10,
color: "#fff",
},
type: "value",
max: 250,
min: 0,
axisLabel: {
show: true,
fontFamily: "SketchRockwell",
fontSize: 10,
color: "#fff",
},
},
grid3D: {
top: "center",
axisLine: {
lineStyle: { color: "#000" },
},
axisPointer: {
lineStyle: { color: "#000" },
},
viewControl: {
autoRotate: true,
},
light: {
main: {
shadow: true,
quality: "ultra",
intensity: 1,
},
},
boxWidth: 80,
boxHeight: 80,
boxDepth: 80,
},
series: [
{
type: "bar3D",
data: data,
shading: "lambert",
label: {
formatter: function (param) {
return param.value[2].toFixed(1);
},
},
},
],
})
);
</script>
</html>
运行结果: