echarts实现二维数据表格的代码示例
时间: 2024-05-09 09:20:11 浏览: 82
echarts使用二维地图实现好看的3D效果
以下是使用 echarts 实现二维数据表格的代码示例:
HTML:
```
<div id="table" style="height: 300px;"></div>
```
JavaScript:
```
// 数据
var data = [
['周一', '周二', '周三', '周四', '周五'],
['10', '20', '30', '40', '50'],
['60', '70', '80', '90', '100'],
['110', '120', '130', '140', '150']
];
// 配置项
var option = {
tooltip: {},
legend: {},
xAxis: {
type: 'category',
data: data[0]
},
yAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3']
},
series: [{
name: '数据1',
type: 'bar',
data: data.slice(1, 2)[0]
}, {
name: '数据2',
type: 'bar',
data: data.slice(2, 3)[0]
}, {
name: '数据3',
type: 'bar',
data: data.slice(3, 4)[0]
}]
};
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('table'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上述代码中,我们首先定义了一个二维数组 `data`,其中包含了表格的行列数据。然后,我们定义了一个 echarts 的配置项 `option`,其中设置了横轴和纵轴的数据以及三个数据系列的数据。
最后,我们创建了一个 echarts 实例并将其初始化为一个柱状图,使用 `setOption` 方法将配置项和数据显示在页面上。
运行上述代码,我们就可以在页面上看到一个简单的二维数据表格。
阅读全文