echarts如何显示json

ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示，在使用 ECharts 时，我们常常需要将其与 JSON 数据相结合，以实现动态和丰富的图表效果，如何用 ECharts 显示 JSON 数据呢？以下将详细介绍这一过程。

我们需要准备一个包含 JSON 数据的文件，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，以下是一个简单的 JSON 数据示例：

{
  "name": "水果",
  "data": [
    {"value": 100, "name": "苹果"},
    {"value": 200, "name": "香蕉"},
    {"value": 300, "name": "西瓜"}
  ]
}

我们将分步骤介绍如何在 ECharts 中显示这个 JSON 数据。

第一步：引入 ECharts

需要在 HTML 页面中引入 ECharts 的库文件，可以通过以下两种方式引入：

1、从 ECharts 官网下载库文件，然后将其放置在项目目录中，再通过<script> 标签引入。

2、使用 CDN 链接直接引入。

以下是使用 CDN 链接引入的示例：

Markup

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts 显示 JSON 数据</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script>
    // 在这里编写 JavaScript 代码
  </script>
</body>
</html>

第二步：解析 JSON 数据

在<script> 标签中，我们需要解析 JSON 数据，并将其赋值给 ECharts 的配置项，以下是解析 JSON 数据的示例：

JavaScript

// 假设 JSON 数据已经以字符串形式给出
var jsonStr = `
{
  "name": "水果",
  "data": [
    {"value": 100, "name": "苹果"},
    {"value": 200, "name": "香蕉"},
    {"value": 300, "name": "西瓜"}
  ]
}
`;
// 使用 JSON.parse() 方法将字符串转换为 JSON 对象
var jsonData = JSON.parse(jsonStr);

第三步：配置 ECharts

echarts如何显示json

我们需要根据解析出的 JSON 数据配置 ECharts，以下是一个简单的饼图配置示例：

JavaScript

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
  title: {
    text: jsonData.name
  },
  tooltip: {},
  series: [{
    name: '销量',
    type: 'pie',
    radius: '55%',
    data: jsonData.data
  }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);