echarts的"surface"类型图,设置数据不需要鼠标悬浮在图形上,初始化时就自动展示出来
时间: 2024-10-19 12:17:01 浏览: 88
echarts 实现圆柱体图形.zip
Echarts的"surface"类型图是一种三维图表,主要用于展示连续的数据表面,例如地形、曲面等。它不同于柱状图或折线图,"surface"不需要用户通过鼠标悬浮交互就能立即显示数据,初始化时就会根据提供的数据生成并展现出来。
要创建一个初始即展示的"surface"图,你需要按照以下步骤操作:
1. 首先,在Echarts官网下载并引入echarts.js库,然后在HTML中创建一个div用于放置图表。
```html
<div id="main" style="width: 800px;height:600px;"></div>
```
2. 然后,编写JavaScript代码来配置和初始化图表。这里是一个简单的例子,假设你已经有了一个二维数组`data`代表Z轴的数据,x轴和y轴的数据分别存储在`xAxisData`和`yAxisData`中:
```javascript
var option = {
tooltip : {},
xAxis3D : {
type : 'category',
data : xAxisData
},
yAxis3D : {
type : 'value'
},
zAxis3D : {
type : 'value'
},
series : [
{
type : 'surface',
data : data,
xField: 'x', // x轴字段名
yField: 'y', // y轴字段名
zField: 'z', // z轴字段名
shading: 'lambert' // 可选的照明模型
}
]
};
// 初始化图表
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
```
3. 最后,调用`setOption()`函数将配置选项应用到图表上,图表就会根据指定的数据和设置自动生成了。
阅读全文