echarts官網(wǎng)

Apache ECharts

Vue3中使用命令安裝ECharts

npm install echarts

在需要使用的地方導(dǎo)入echarts

import * as echarts from 'echarts'; // 導(dǎo)入 ECharts 庫

創(chuàng)建儲存DOM元素的響應(yīng)式引用

// 創(chuàng)建一個(gè) Vue 的響應(yīng)式引用，用于存儲對 DOM 元素的引用
const chartRef = ref<HTMLDivElement | null>(null);

<HTMLDivElement | null>：ref 的泛型參數(shù) <HTMLDivElement | null> 指定了 chartRef 可以持有的值的類型。在這里，chartRef 可以持有 HTMLDivElement 類型的對象或 null。HTMLDivElement 是一個(gè) DOM 元素的類型，指的是一個(gè) <div> 元素；

(null)：表示chartRef初始值是null

創(chuàng)建div用來儲存圖表

<template>
  <!-- 使用 ref 將 chartRef 綁定到這個(gè) div 元素 -->
  <div ref="chartRef" style="width: 100%; height: 50vh;"></div>
</template>

定義ECharts的配置選項(xiàng)

const chartOptions = {
  title: {
    text: '簡單柱狀圖示例' // 圖表的標(biāo)題
  },
  tooltip: {}, // 啟用圖表的工具提示功能
  legend: {
    data: ['銷售量'] // 圖例顯示的項(xiàng)名稱
  },
  xAxis: {
    data: ['產(chǎn)品 A', '產(chǎn)品 B', '產(chǎn)品 C', '產(chǎn)品 D', '產(chǎn)品 E'] // X 軸的類目數(shù)據(jù)
  },
  yAxis: {}, // Y 軸的配置項(xiàng)，使用默認(rèn)配置
  series: [
    {
      name: '銷售量', // 數(shù)據(jù)系列的名稱
      type: 'bar', // 圖表類型為柱狀圖
      data: [5, 20, 36, 10, 10] // 數(shù)據(jù)系列的具體數(shù)據(jù)
    }
  ]
};

下面是一些配置選項(xiàng)的講解

• title：

  • text：標(biāo)題文本，如 "Sales Report"
  • subtext：副標(biāo)題文本，如 "2024 Q1"
  • left、top、right、bottom：標(biāo)題的位置，可以是 auto、center、left、right、top、bottom 等。

• tooltip：

  • trigger：觸發(fā)方式，可以是 item（觸發(fā)數(shù)據(jù)項(xiàng)）或 axis（觸發(fā)坐標(biāo)軸）。
  • formatter：提示框格式化函數(shù)，可以是字符串模板或函數(shù)。
  • backgroundColor：背景顏色，如 '#fff' 或 'rgba(0,0,0,0.7)'。

• legend：

  • data：圖例數(shù)據(jù)數(shù)組，例如 ['Sales', 'Revenue']。
  • orient：圖例布局方向，'horizontal'（水平）或 'vertical'（垂直）。
  • left、top、right、bottom：圖例的位置。

• xAxis 和 yAxis：

  • type：坐標(biāo)軸類型，可以是 'value'（數(shù)值型）、'category'（類目型）、'time'（時(shí)間型）或 'log'（對數(shù)型）。
  • data（僅類目型）：坐標(biāo)軸的刻度標(biāo)簽數(shù)組，如 ['Jan', 'Feb', 'Mar']。
  • name：坐標(biāo)軸名稱，如 'Sales'。
  • axisLabel：坐標(biāo)軸標(biāo)簽配置，包括 formatter（標(biāo)簽格式化函數(shù)）。

• series：

  • type：圖表類型，例如 'line'（折線圖）、'bar'（柱狀圖）、'pie'（餅圖）。
  • data：數(shù)據(jù)數(shù)組，如 [120, 200, 150, 80, 70]。
  • name：系列名稱，如 'Sales'。
  • itemStyle：系列項(xiàng)樣式配置，包括 color（顏色）、borderColor（邊框顏色）。

• grid：

  • left、top、right、bottom：網(wǎng)格的邊距，例如 40、60。
  • containLabel：是否包含坐標(biāo)軸標(biāo)簽在網(wǎng)格范圍內(nèi)，true 或 false。

• color：

  • color：圖表的顏色數(shù)組，如 ['#3398DB', '#FF5722']，影響系列的顏色。

• dataZoom：

  • type：數(shù)據(jù)縮放類型，'inside'（內(nèi)部縮放）或 'slider'（滑塊縮放）。
  • start 和 end：縮放范圍的起始和結(jié)束百分比，如 0 和 100。

• toolbox：

  • show：是否顯示工具箱，true 或 false。
  • feature：工具箱功能，如 saveAsImage（保存為圖片）、dataView（數(shù)據(jù)視圖）。

這些選項(xiàng)可以組合使用以實(shí)現(xiàn)豐富的圖表效果和交互，具體也可以去看官網(wǎng)上的示例Apache ECharts。

初始化ECharts實(shí)例和設(shè)置圖表配置項(xiàng)

// 在組件掛載后執(zhí)行的生命周期鉤子
onMounted(() => {
  // 確保 chartRef 已經(jīng)被綁定到一個(gè) DOM 元素
  if (chartRef.value) {
    // 初始化 ECharts 實(shí)例，傳入 DOM 元素
    const chartInstance = echarts.init(chartRef.value);
    // 設(shè)置圖表的配置項(xiàng)
    chartInstance.setOption(chartOptions);
  }
});

這樣就可以使用簡單的ECharts了

總結(jié)

到此這篇關(guān)于Vue3項(xiàng)目中使用ECharts的文章就介紹到這了,更多相關(guān)Vue3使用ECharts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論