echarts中导入excel数据并制作k线图
时间: 2023-08-19 11:03:58 浏览: 315
要在Echarts中制作K线图并导入Excel数据,可以按照以下步骤进行:
1. 准备数据
首先,需要准备K线图所需的数据,并将其保存为Excel格式。数据包括时间、开盘价、收盘价、最高价、最低价等信息。
2. 导入数据
在Echarts中,可以通过插件`echarts-xls`来导入Excel数据。需要在HTML文件中引入该插件,例如:
```html
<script src="echarts.min.js"></script>
<script src="xlsx.core.min.js"></script>
<script src="echarts-xls.min.js"></script>
```
然后在JS文件中使用以下代码来导入数据:
```javascript
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var sheet = workbook.Sheets[workbook.SheetNames[0]];
var option = {
...
series: [{
...
data: []
}]
};
for (var i = 1; i <= sheet["!ref"].split(":")[1].replace(/\D/g, ''); i++) {
option.series[0].data.push([
sheet['A' + i].v,
sheet['B' + i].v,
sheet['C' + i].v,
sheet['D' + i].v,
sheet['E' + i].v
]);
}
myChart.setOption(option);
}
reader.readAsBinaryString(file);
```
其中`file`是input标签的id,`myChart`是Echarts图表的实例对象。
3. 绘制K线图
在Echarts中,可以使用`series`中的`type`属性来指定图表类型。要绘制K线图,需要将`type`设置为`candlestick`,例如:
```javascript
option.series = [{
type: 'candlestick',
data: data,
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
}];
```
其中`data`是从Excel中导入的数据。
4. 显示图表
最后,需要在HTML文件中添加一个容器元素来显示Echarts图表,例如:
```html
<div id="chart" style="width: 800px; height: 600px;"></div>
```
然后在JS文件中使用以下代码来生成Echarts图表:
```javascript
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
```
这样就可以在Echarts中导入Excel数据并绘制K线图了。
阅读全文