EChartsでデータを非同期で取得する方法はどうやって実現しますか？

2年 ago
芽依, 雨夜
1 minute

EChartsの非同期データ取得を実現するには、次の手順に従うことができます：

  1. HTMLファイルにEChartsのスクリプトファイルをインポートする方法は、次のようになります。
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  1. グラフを表示するためのコンテナを作成します。
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
  1. JavaScriptファイルでデータを取得するために、AJAX、Fetch、または他の非同期リクエストメソッドを使用します。
function getData(callback) {
  // 发起异步请求获取数据
  // 例如使用 Fetch 方法：
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // 调用回调函数将获取的数据传递给图表渲染函数
      callback(data);
    });
}
  1. データを取得した後、EChartsのAPIを使用してグラフを描画します。
// 获取容器元素
var chartContainer = document.getElementById('chartContainer');

// 创建图表实例
var chart = echarts.init(chartContainer);

// 创建图表配置对象
var option = {
  // 配置项...
};

// 渲染图表
function renderChart(data) {
  // 在配置项中使用获取到的数据
  option.series[0].data = data;

  // 使用刚指定的配置项和数据显示图表
  chart.setOption(option);
}

// 调用获取数据的函数，并传递渲染图表的回调函数
getData(renderChart);

以上の手順に従うと、EChartsの非同期データ取得とグラフ描画を実現することができます。データ取得方法とデータ処理ロジックを実際の状況に合わせて修正してください。

bannerAds