返回

Echarts 常用 API（echarts 和 echartsInstance）

前端

简介

Echarts 是一个用于创建交互式、可视化图表库的 JavaScript 库。它以其强大的功能、丰富的图表类型和易用性而闻名。Echarts 库中有两个重要的 API：echarts 和 echartsInstance。

Echarts

echarts API 是一个全局对象，它提供了一组用于创建和操作图表的方法和属性。您可以使用此 API 来创建图表、设置图表选项、添加数据以及处理用户交互。

EchartsInstance

echartsInstance API 是一个实例对象，它代表了一个特定的图表实例。您可以使用此 API 来获取图表实例的属性和方法，例如，您可以使用此 API 来获取图表实例的尺寸、数据和选项。

差异

echarts API 是一个全局对象，它可以用于创建和操作任何图表实例。echartsInstance API 是一个实例对象，它只能用于获取和操作一个特定的图表实例。

使用

要在您的项目中使用 echarts API，您需要首先引入 echarts 库。您可以通过 CDN 或 npm 来引入 echarts 库。

<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>

import * as echarts from 'echarts';

要使用 echartsInstance API，您需要先创建一个图表实例。您可以使用 echarts.init() 方法来创建一个图表实例。

const myChart = echarts.init(document.getElementById('myChart'));

现在，您可以使用 echartsInstance API 来获取和操作图表实例的属性和方法。例如，您可以使用 myChart.setOption() 方法来设置图表实例的选项。

myChart.setOption({
  title: {
    text: '我的图表'
  },
  series: [{
    data: [1, 2, 3, 4, 5],
    type: 'line'
  }]
});

示例

以下是一个使用 echarts 和 echartsInstance API 创建简单折线图的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="myChart"></div>

  <script>
    // 创建图表实例
    const myChart = echarts.init(document.getElementById('myChart'));

    // 设置图表选项
    myChart.setOption({
      title: {
        text: '我的折线图'
      },
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [{
        data: [1, 2, 3, 4, 5, 6, 7],
        type: 'line'
      }]
    });
  </script>
</body>
</html>

结论

Echarts 是一个功能强大、易于使用的 JavaScript 库，它可以帮助您创建交互式、可视化图表。echarts 和 echartsInstance API 是 Echarts 库中的两个重要 API。您可以使用 echarts API 来创建和操作图表，您可以使用 echartsInstance API 来获取和操作图表实例的属性和方法。