初试Echarts（之二）看上去像曲面的一个东西
效果图
源代码
值得一提，不仅需要echarts.min.js还需要echarts-gl.min.js
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EChartstitle>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js">script>
<style>
#main {
/*对子元素开启弹性布局*/
display: flex;
/*弹性元素在必要的时候换行*/
flex-wrap: wrap;
/*将弹性元素居中*/
justify-content: center;
width: 600px;
height: 700px;
}
style>
head>
<body>
<div id="main">
div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
function makeDate() {
let result = [];
let total = 19; // 每层的数据密集程度
for (let layer = 1; layer <= 28; ++layer) {
for (let bs = 0; bs != total; ++bs) {
result.push([17.5 / total * bs, layer, 0.2 + Math.random() * 1.3])
}
}
return result
}
let data = makeDate()
console.log(data)
option = {
tooltip: {},
xAxis3D: {
name: 'X',
type: 'value'
},
yAxis3D: {
name: 'Y',
type: 'value'
},
zAxis3D: {
name: 'Z',
type: 'value',
min: 0,
max: 1.8,
},
visualMap: {
type: 'continuous',
calculable: true,
itemHeight: 350,
left: 'right',
top: 'center',
show: true,
dimension: 2,
min: 0,
max: 1.8,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
],
}
},
grid3D: {
viewControl: {
distance: 300
},
},
series: [
{
type: 'surface',
wireframe: {
show: true,
},
data: data
}
]
};
option && myChart.setOption(option);
script>
body>
html>