echarts類型的闡述

一、echarts類型 ts

import * as echarts from 'echarts/core'; // 引入echarts核心組件
import { BarChart } from 'echarts/charts'; // 引入柱狀圖組件
import { TitleComponent, TooltipComponent } from 'echarts/components'; // 引入標題和提示框組件
import { CanvasRenderer } from 'echarts/renderers'; // 引入canvas渲染器

echarts.use([BarChart, TitleComponent, TooltipComponent, CanvasRenderer]); // 註冊組件

const echartInstance = echarts.init(document.getElementById('main')); // 初始化echarts實例

const option = { // 配置項
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
    },
  ],
};

echartInstance.setOption(option); // 繪製圖表

echarts是一款非常強大的數據可視化庫，其中的echarts類型ts則提供了更好的TypeScript支持。在使用echarts類型ts之前，需要先引入需要用到的組件，這裡我們引入了柱狀圖組件、標題組件和提示框組件。接着，我們通過echarts.init方法初始化一個echarts實例，並通過setOption方法將圖表配置項作為參數傳入，最終繪製出一張柱狀圖。

二、echarts類型:category

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
    },
  ],
};

echarts類型:category提供了對於類目型數據的支持。在這個示例中，我們將x軸類型設置為類目型，然後通過data屬性設置x軸刻度的標籤名。接下來我們設置y軸類型為值類型，然後通過series屬性中的data字段設置每個數據點的值。

三、echarts類型:log

const option = {
  xAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      formatter: function (value) {
        return Math.pow(10, value).toFixed(0);
      }
    }
  },
  yAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      formatter: function (value) {
        return Math.pow(10, value).toFixed(0);
      }
    }
  },
  series: [{
    symbolSize: 10,
    data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]],
    type: 'scatter'
  }]
};

echarts類型:log提供了對於對數軸的支持。在這個示例中，我們設置x軸和y軸類型都為值型，並且將其都設置為對數軸。然後我們通過axisLabel字段設置軸標籤的formatter函數，用於將對數軸上的刻度值轉換為實際的值。最後我們配置了一個散點圖，通過data字段設置每個散點的坐標。