【掌握Echarts，數據可視化輕鬆上手】詳解API操作與實戰技巧

最佳答案

引言

ECharts 是一款基於 JavaScript 的開源可視化庫，它可能幫助開辟者將數據轉化為直不雅、可交互的圖表。控制 ECharts，可能讓數據可視化變得輕鬆上手。本文將具體介紹 ECharts 的 API 操縱與實戰技能，幫助讀者疾速控制數據可視化的核心技能。

一、ECharts 基本設置

1.1 代碼示例

以下是一個簡單的 ECharts 柱狀圖示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts 入門示例</title>
<style>
.box {
  width: 600px;
  height: 400px;
  background-color: rgb(188, 227, 236);
}
</style>
</head>
<body>

<div id="main" class="box"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: 'ECharts 入門示例'
  },
  tooltip: {},
  legend: {
    data:['銷量']
  },
  xAxis: {
    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

myChart.setOption(option);
</script>

</body>
</html>

二、靜態數據與交互

2.1 代碼示例

以下是一個靜態更新數據的示例：

// 假設這是從後端獲取的數據
var data = [10, 20, 30, 40, 50];

// 靜態更新數據
setInterval(function () {
  option.series[0].data = data;
  myChart.setOption(option);
}, 1000);

三、高等用法

3.1 多圖表組合

3.1.1 在同一容器中繪製多個圖表

以下是一個在同一容器中繪製多個圖表的示例：

var myChart2 = echarts.init(document.getElementById('main'));

var option2 = {
  title: {
    text: '另一個圖表'
  },
  tooltip: {},
  legend: {
    data:['銷量']
  },
  xAxis: {
    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'line',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

myChart2.setOption(option2);

3.1.2 創建多個容器並分辨初始化 ECharts 實例

<div id="main" class="box"></div>
<div id="main2" class="box"></div>

var myChart2 = echarts.init(document.getElementById('main2'));
// ... 設置項
myChart2.setOption(option2);

3.1.3 實現多圖聯動

// 聯動兩個圖表
myChart.on('click', function (params) {
  myChart2.setOption({
    series: [{
      data: [params.value, params.value, params.value, params.value, params.value, params.value]
    }]
  });
});

四、總結

本文具體介紹了 ECharts 的 API 操縱與實戰技能，包含基本設置、靜態數據與交互以及高等用法。經由過程進修本文，讀者可能疾速控制 ECharts 的核心技能，實現各種數據可視化須要。