echarts怎么用json数据

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地在网页中创建可交互的图表，而 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在使用 ECharts 展示数据时，常常需要用到 JSON 格式的数据，如何用 JSON 数据驱动 ECharts 创建图表呢？下面我将详细介绍操作步骤。

准备 JSON 数据

我们需要准备一份 JSON 格式的数据，这里以一个简单的柱状图为例，数据如下：

{
  "xAxis": ["苹果", "香蕉", "橙子", "梨"],
  "yAxis": [120, 200, 150, 80]
}

这份 JSON 数据包含两个部分：xAxis 表示横轴的类别，yAxis 表示纵轴的数值。

引入 ECharts

在 HTML 页面中，需要先引入 ECharts 的 JavaScript 库，你可以从 ECharts 官网下载库文件，或者使用 CDN 链接，以下为使用 CDN 链接的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts 示例</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 type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    
    // 指定图表的配置项和数据
    var option = {
      // ...
    };
    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>
</html>

解析 JSON 数据

echarts怎么用json数据

在<script> 标签中，我们需要解析 JSON 数据，并将其赋值给图表的配置项，这里使用 JavaScript 的eval() 函数将 JSON 字符串转换为 JavaScript 对象：

var jsonData = '{"xAxis": ["苹果", "香蕉", "橙子", "梨"], "yAxis": [120, 200, 150, 80]}';
var dataObj = eval('(' + jsonData + ')');

配置图表

我们将解析后的 JSON 数据配置到图表中，修改var option = { ... }; 部分，代码如下：

var option = {
  title: {
    text: '水果销量统计'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: dataObj.xAxis
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: dataObj.yAxis
  }]
};

显示图表

调用myChart.setOption(option); 方法，将配置项和数据显示在图表上。

echarts怎么用json数据

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts 示例</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 type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // JSON 数据
    var jsonData = '{"xAxis": ["苹果", "香蕉", "橙子", "梨"], "yAxis": [120, 200, 150, 80]}';
    var dataObj = eval('(' + jsonData + ')');
    
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '水果销量统计'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: dataObj.xAxis
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: dataObj.yAxis
      }]
    };
    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>
</html>

这样，我们就完成了使用 JSON 数据驱动 ECharts 创建图表的过程，实际应用中，JSON 数据可能需要从服务器端动态获取，这时可以使用 AJAX 方法（如使用$.ajax）从服务器请求数据，然后在回调函数中处理数据并显示图表。

ECharts 支持丰富的图表类型和配置项，你可以根据需求进行定制，在掌握基本使用方法后，你可以查阅 ECharts 官方文档，了解更多高级功能和用法，通过不断实践和探索，相信你能制作出既美观又实用的图表，为你的项目增色不少。