react+typescript中如何使用echarts

這篇“react+typescript中如何使用echarts”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react+typescript中如何使用echarts”文章吧。

安裝echarts

npm install echarts --save

按需加載Echarts demo

echarts.init() API文檔

import * as echarts from 'echarts/core'
import {
  BarChart,
  // 系列類型的定義后綴都為 SeriesOption
  LineChart,
} from 'echarts/charts'
import {
  TitleComponent,
  // 組件類型的定義后綴都為 ComponentOption
  TooltipComponent,
  GridComponent,
  // 數(shù)據(jù)集組件
  DatasetComponent,
  // 內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件 (filter, sort)
  TransformComponent,
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { useEffect, useRef } from 'react'

// 注冊必須的組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
])

const ECharts: React.FC = () => {
  // 1. get DOM
  const chartRef = useRef(null)

  useEffect(() => {
    // 2. 實(shí)例化表格對象
    const chart = echarts.init(chartRef.current as unknown as HTMLDivElement, undefined, {
      width: 1000,
      height: 500,
    })
    // 3. 定義數(shù)據(jù)
    const option = {
      title: {
        text: '測試圖表',
      },
      xAxis: {
        type: 'category',
        data: ['1-1', '1-2', '1-3', '1-5', '1-6', '1-7', '1-8', '1-9'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [140, 110, 100, 90, 70, 30, 10, 0],
          type: 'line',
        },
      ],
    }
    // 4. 調(diào)用表格數(shù)據(jù)
    chart.setOption(option)
  }, [])

  return <div className="charts" ref={chartRef} />
}

export default ECharts

錯誤記錄

實(shí)例化Echarts的時(shí)候出現(xiàn)：“類型“null”的參數(shù)不能賦給類型“HTMLElement”的參數(shù)”錯誤，是typescript類型檢查引起的，因此需要對該chartRef.current定義類型，可以定義成any，這里用的是typescript的雙重?cái)嘌匀ザx的類型。

發(fā)生錯誤的代碼

修改后的代碼

注意：

類型斷言只能夠「欺騙」TypeScript 編譯器，無法避免運(yùn)行時(shí)的錯誤，反而濫用類型斷言可能會導(dǎo)致運(yùn)行時(shí)錯誤 類型斷言只會影響
TypeScript 編譯時(shí)的類型，類型斷言語句在編譯結(jié)果中會被刪除，所以它不是類型轉(zhuǎn)換，不會真的影響到變量的類型。

將圖表改為自適應(yīng)容器大小 – .resize()

echarts中提供了resize函數(shù)能夠自動改變圖表的大小，但是需要使用window.onresize去監(jiān)聽窗口的變化，只要窗口尺寸變化了就調(diào)用resize方法，并且圖表的寬度和高度要分別設(shè)置成百分比和vh單位，否則resize會失效。

基于上面的demo實(shí)現(xiàn)：
多復(fù)制一個表格數(shù)據(jù)之后在調(diào)用表格數(shù)據(jù)后面加window.resize函數(shù)，有多少個表就繼續(xù)往后面加多少個resize。

 // 4. 調(diào)用表格數(shù)據(jù)
    chart.setOption(option)
    chart2.setOption(option2)
    // 5. 將圖表變?yōu)樽赃m應(yīng)
    window.onresize = () => {
      chart.resize()
      chart2.resize()
    }

以上就是關(guān)于“react+typescript中如何使用echarts”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。