可以使用echarts
中的echarts-gl库，将
excel中的
数据转化为JSON格式的
数据，然后在echarts
中使用该JSON格式的
数据作为data。具体的步骤是：
1. 在HTML文件
中引入echarts及echarts-gl库。
2. 将
excel中的
数据转化为JSON格式的
数据。
3. 在echarts
中设置
数据源为该JSON格式的
数据，指定要显示的列。
4. 渲染图表。
以下是实现该功能的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts导入
Excel中某
一列的
数据做data</title>
<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>
</head>
<body>
<div id="chart" style="width: 800px;height:400px"></div>
<script>
// 定义读取
excel数据的函数
function get
ExcelData() {
// 假设
excel中的
数据如下：
// 日期 数量1 数量2
// 1月1日 100 200
// 1月2日 150 300
// 1月3日 120 250
var
excelData = {
"日期": ["1月1日", "1月2日", "1月3日"],
"数量1": [100, 150, 120],
"数量2": [200, 300, 250]
};
// 将
excel中的
数据转化为JSON格式的
数据
var jsonData = {
legend: {},
tooltip: {},
dataset: {
source:
excelData //
数据源为
excelData
},
xAxis: { type: 'category' }, // x轴类型为category
yAxis: {}, // y轴默认为
数值类型
series: [
{ type: 'bar', seriesLayoutBy: 'column' }, // 按列显示柱状图
{ type: 'bar', seriesLayoutBy: 'column' } // 按列显示柱状图
]
};
return jsonData;
}
// 在echarts
中设置
数据源为
excel中的
数据，指定要显示的列
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
backgroundColor: '#2c343c',
xAxis: { show:false },
yAxis: { show:false },
legend: { data: ['数量1'] },
tooltip: {},
dataZoom: [ { type: 'slider' } ],
series: [{
name: '数量1',
type: 'bar',
data: get
ExcelData().dataset.source["数量1"] // 指定要显示的列
}]
});
// 渲染图表
chart.setOption(get
ExcelData());
</script>
</body>
</html>
```
注意：以上示例代码仅作为参考，实际上读取
excel数据的方式可能因使用的库而异。
扫一扫
5486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
