{ name:'海洋水文数据集', type:'scatter', coordinateSystem: 'bmap', data: [ {name: 'ShiDao', value: [122.30, 36.94], symbolSize: 15, itemStyle: {color: 'blue'}}, {name: 'XiaoMaiDao', value: [120.28, 36.02], symbolSize: 15, itemStyle: {color: 'blue'}}, {name: 'LianYunGang', value: [119.31, 34.73], symbolSize: 15, itemStyle: {color: 'blue'}}, {name: 'YinShuiChuan', value: [121.95, 30.85], symbolSize: 15, itemStyle: {color: 'blue'}}, {name: '卫星遥感海表面温度数据', value: [146,12], symbolSize: 15, itemStyle: {color: 'blue'}} ] }echarts代码怎么从json文件调用数据
时间: 2024-02-26 12:57:23 浏览: 72
要从JSON文件中调用数据,可以使用JavaScript中的XMLHttpRequest对象来加载JSON文件并将其解析为JavaScript对象,然后将对象传递给ECharts的option配置项中。
以下是一个简单的示例代码,假设JSON文件名为data.json:
```javascript
// 创建XHR对象
var xhr = new XMLHttpRequest();
// 指定请求方式和请求地址
xhr.open('GET', 'data.json', true);
// 设置响应类型为JSON
xhr.responseType = 'json';
// 发送请求
xhr.send();
// 响应加载完成后执行回调函数
xhr.onload = function() {
// 获取响应数据
var data = xhr.response;
// 使用响应数据创建ECharts的option配置项
var option = {
// ...
series: [
{
name: '海洋水文数据集',
type: 'scatter',
coordinateSystem: 'bmap',
data: data,
// ...
}
]
// ...
};
// 使用option配置项创建ECharts实例并渲染图表
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
};
```
需要注意的是,由于XHR请求是异步操作,因此需要在XHR的onload回调函数中使用响应数据创建ECharts的option配置项并渲染图表。同时,需要保证JSON文件的路径和文件名正确。
阅读全文