今天要進入我不是很喜歡但是又一定要認識的套件，因為專案需求，我不能按下右上角的 X 然後豪爽的轉身離開，只能硬著頭皮按下滑鼠右鍵點選翻譯成中文，但是真的很不好懂，加上可以參考的資源頗少，所以對於這個套件，我盡力分享自己用過和理解的部分！

#套件簡介

套件裡有各個版本，最新的是 amcharts5，但是目前專案上使用 amcharts4，對他也比較有研究，如果需要其他版本，可以參考官網！

AMCHARTS (JavaScript Charts & Maps)
https://www.amcharts.com/

#安裝流程

npm install @amcharts/amcharts4

#開始方法

使用 AmCharts4 時，需要導入兩個不同的檔案來取得所需的功能，這兩個檔案分別是 core.ts 和 charts.ts。

1. core.ts ：包含 AmCharts4 的核心功能，如渲染引擎、互動功能、通用控制等。 這是 AmCharts4 的基礎，無論你建立圖表還是地圖，都必須導入這個核心模組，因為它提供了整個 AmCharts 系統的基礎設施。
2. charts.ts ：包含與圖表相關的所有功能，例如折線圖、長條圖、圓餅圖等。 如果要建立圖表，需要匯入這個模組，以取得圖表相關的類別和功能。

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

#使用方法

這次的使用方法示範條件如下：

1. amcharts4 + vue3.js <script setup>
2. 折線圖搭配 scrollBar

<template>
  <div class="hello" ref="chartdiv" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';

const chartdiv = ref(null);
let chart = null;
let data = [];
let visits = 10;
for (let i = 1; i < 366; i++) {
  visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10)
  data.push({ date: new Date(2018, 0, i), name: 'name' + i, value: visits })
};

// 呼叫 AmCharts的useTheme 方法，用於啟用 AmCharts 的主題（這裡是am4themes_animated）
am4core.useTheme(am4themes_animated);

function renderChart() {
  // Creating XYCharts，AmCharts 圖表的實例
  chart = am4core.create(chartdiv.value, am4charts.XYChart);
  chart.paddingRight = 20;

  // this creates initial fade-in
  chart.hiddenState.properties.opacity = 0;
  chart.data = data;

  // Add and configure Series 新增圖表資料和設定圖表屬性
  // 建立和配置 X 軸（值軸）
  let dateAxis = chart.xAxes.push(new am4charts.DateAxis());

  // 定義日期軸網格線位置的屬性。 在這裡，將其設為0，表示網格線將位於日期軸的起始位置
  dateAxis.renderer.grid.template.location = 0;

  // 建立和配置 Y 軸（值軸）
  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // 配置值軸工具提示（Tooltip）的屬性，valueAxis 是 Y 軸配置屬性 
  valueAxis.tooltip.disabled = true;

  // 設定值軸的最小寬度，valueAxis 是 Y 軸配置屬性 
  valueAxis.renderer.minWidth = 50;

  // 建立一個新的折線系列並將其新增到圖表中。 折線系列用於繪製折線圖（;線圖）
  let series = chart.series.push(new am4charts.LineSeries())

  // X 軸資料欄位的屬性
  series.dataFields.dateX = 'date';

  // Y 軸資料欄位的屬性
  series.dataFields.valueY = 'value';

  // 指定工具提示文字的屬性，這裡顯示 Y 軸值（'valueY.value'）
  series.tooltipText = '{valueY.value}';

  // 建立一個新的XY遊標實例，用於啟用滑鼠互動功能（例如，當滑鼠懸停在圖表上時，顯示工具提示等）
  chart.cursor = new am4charts.XYCursor();

  // 創建了一個 XY 圖表滾動條
  let scrollbarX = new am4charts.XYChartScrollbar();

  // 將折線系列（series）新增至捲軸中，以確保捲軸與特定係列關聯
  scrollbarX.series.push(series);

  // 將捲軸與圖表關聯起來，從而啟用滾動功能
  chart.scrollbarX = scrollbarX;
}

onMounted(() => {
  renderChart();
})

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }
})
</script>

<style lang="scss" scoped>
.hello {
  width: 100%;
  height: 500px;
}
</style>

畫面展示

#小結

應用的部分主要會說明屬性和比較常使用的柱狀圖，以及踩過的坑，因為篇幅過長，就把內容拆分...