How to read JSON data with echarts?

9 months ago

Jackson Davis

2 minutes

To read JSON data, you first need to load the JSON data into JavaScript. Then, use the methods provided by ECharts to bind the data to the chart.

Here is a simple example demonstrating how to read JSON data and bind it to ECharts.

Create an HTML file, include the ECharts library, and add a DOM element to display the chart.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts JSON数据读取示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>

– The data file named data.js

var jsonData = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    {name: '广州', value: 150},
    // ... 其他数据
];

javascript file named script.js

// 获取DOM元素
var chartDom = document.getElementById('chart');

// 初始化图表
var myChart = echarts.init(chartDom);

// 图表配置
var option = {
    // 图表类型
    type: 'bar',
    // 数据
    data: jsonData,
    // 其他配置项...
};

// 将配置项设置给图表
myChart.setOption(option);

To run the HTML file, you should be able to see a chart generated from JSON data.

This is just a simple example which you can modify and expand according to your needs. For more information on how to use ECharts and its API, please refer to the official documentation of ECharts.