写js代码从文件读取json数据,并作为ECharts的Series的Data
时间: 2024-03-15 09:44:55 浏览: 116
Js实现json数据的读写
4星 · 用户满意度95%
可以使用JavaScript中的XMLHttpRequest对象来读取json文件,并将读取到的数据作为ECharts的Series的Data。具体步骤如下:
1. 创建XMLHttpRequest对象
```javascript
var xhr = new XMLHttpRequest();
```
2. 打开json文件
```javascript
xhr.open('GET', 'data.json', true);
```
3. 发送请求
```javascript
xhr.send();
```
4. 监听请求状态变化
```javascript
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
// 将data作为ECharts的Series的Data
option.series[0].data = data;
// 渲染图表
myChart.setOption(option);
}
};
```
完整代码示例:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.send();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
option.series[0].data = data;
myChart.setOption(option);
}
};
```
其中,`data.json`是你要读取的json文件路径,`option`是你的ECharts配置项,`myChart`是你的ECharts实例。
阅读全文