echarts如何加载json里的数据

ECharts 是一个使用 JavaScript 编写的开源可视化库，它提供了丰富的图表类型和可视化选项，可以轻松地将 JSON 数据加载到图表中，本文将详细介绍如何使用 ECharts 将 JSON 数据加载到图表中，并展示如何创建各种图表类型。

我们需要引入 ECharts 库，可以通过在 HTML 文件中添加以下代码来实现：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

接下来，我们需要准备一个 JSON 数据，假设我们有一个包含城市人口数据的 JSON 对象，如下所示：

{
  "城市": ["北京", "上海", "广州", "深圳"],
  "人口": [2154, 2424, 1303, 1253]
}

为了将 JSON 数据加载到 ECharts 图表中，我们需要执行以下步骤：

1、准备一个用于存放图表的 DOM 元素，例如一个 <div> 标签。

<div id="main" style="width: 600px;height:400px;"></div>

2、使用 JavaScript 获取该 DOM 元素，并设置其样式。

var main = document.getElementById('main');
main.style.width = '600px';
main.style.height = '400px';

3、初始化 ECharts 实例并设置配置项。

var chart = echarts.init(main);

4、配置 ECharts 图表的选项，我们需要定义图表类型、数据源、坐标轴等，以下是一个简单的柱状图配置示例：

var option = {
  title: {
    text: '城市人口数据'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ["北京", "上海", "广州", "深圳"]
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '人口',
    type: 'bar',
    data: [2154, 2424, 1303, 1253]
  }]
};

5、使用 ECharts 实例加载配置项。

chart.setOption(option);

现在，我们已经成功地将 JSON 数据加载到了柱状图中，接下来，我们将探讨如何创建其他类型的图表。

我们可以尝试创建一个折线图，我们需要调整 JSON 数据以适应折线图的需求，假设我们有以下数据：

{
  "日期": ["1月", "2月", "3月", "4月", "5月", "6月"],
  "销售额": [1200, 1400, 1600, 1800, 2000, 2200]
}

我们可以按照之前的方法创建一个折线图，我们需要更新配置项中的 xAxis 和 series 数据：

var option = {
  title: {
    text: '月销售额数据'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额']
  },
  xAxis: {
    type: 'category',
    data: ["1月", "2月", "3月", "4月", "5月", "6月"]
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销售额',
    type: 'line',
    data: [1200, 1400, 1600, 1800, 2000, 2200]
  }]
};

使用 ECharts 实例加载新的配置项：