echarts如何获取本地json数据

您可以通过使用JavaScript的XMLHttpRequest对象来获取本地JSON数据，然后将其传递给echarts图表。以下是一个简单的示例代码，可以帮助您开始： 1. 首先，创建一个JSON文件，例如 data.json，并将数据存储在其中： ``` [ {"name": "北京", "value": 100}, {"name": "上海", "value": 200}, {"name": "广州", "value": 300}, {"name": "深圳", "value": 400}, {"name": "重庆", "value": 500}, {"name": "杭州", "value": 600}, {"name": "成都", "value": 700}, {"name": "武汉", "value": 800}, {"name": "南京", "value": 900}, {"name": "西安", "value": 1000} ] ``` 2. 在您的HTML文件中引入echarts库，并创建一个具有合适配置的div容器。 3. 使用JavaScript的XMLHttpRequest对象获取JSON数据，然后将其传递给echarts实例，并使用其提供的API来创建地图图表。 HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map Chart</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script> </head> <body>  <div id="map" style="width: 800px; height: 600px;"></div> <script> //使用XMLHttpRequest获取JSON数据 var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onload = function() { if (xhr.status === 200) { //将JSON数据传递给echarts实例 var myChart = echarts.init(document.getElementById('map')); var option = { title: { text: 'Map Chart' }, tooltip: { trigger: 'item' }, series: [{ type: 'map', map: 'china', data: JSON.parse(xhr.responseText) }] }; myChart.setOption(option); } }; xhr.send(); </script> </body> </html> ``` 在上面的示例代码中，我们使用XMLHttpRequest对象来获取data.json文件中的JSON数据，并使用JSON.parse()方法将其转换为JavaScript对象。然后，我们将该对象传递给echarts实例，并使用其提供的API来创建地图图表。