React使用Echarts/Ant-design-charts的案例代碼

更新時(shí)間：2022年11月24日 14:36:43 作者：風(fēng)雨兼程.

這篇文章主要介紹了React使用Echarts/Ant-design-charts的實(shí)例代碼，本文通過實(shí)例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

React使用Echarts

1.React項(xiàng)目安裝導(dǎo)入Echarts

$ npm install echarts --save

2.組件頁面中使用Echarts

// 導(dǎo)入echarts 并將全部導(dǎo)入的命名為echarts
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
 
const Home = () => {
  const domRef = useRef()
 
  useEffect(() => {
    chartTnit()
  }, [])
 
  const chartTnit = () => {
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    const myChart = echarts.init(domRef.current)
 
    // 繪制圖表
    myChart.setOption({
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
      },
      yAxis: {},
      series: [
        {
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })
  }
 
  return (<div>
    {/* 掛載節(jié)點(diǎn) */}
    <div ref={domRef} style={{ width: '500px', height: '500px' }}></div>
  </div>)
}
export default Home

React使用Ant-design-charts

1.React項(xiàng)目安裝導(dǎo)入Ant-design-charts

$ npm install @ant-design/charts --save

2.組件頁面中使用Ant-design-charts

 import React from 'react'
// 引入Column柱狀圖表
import { Column } from '@ant-design/charts'
 
const Home = () => {
 
  const data = [
    { type: '家具家電', sales: 38 },
    { type: '糧油副食', sales: 52 },
    { type: '生鮮水果', sales: 61 },
    { type: '美容洗護(hù)', sales: 145 },
    { type: '母嬰用品', sales: 48 },
    { type: '進(jìn)口食品', sales: 38 },
    { type: '食品飲料', sales: 38 },
    { type: '家庭清潔', sales: 38 },
  ]
  const config = {
    data,
    xField: 'type',
    yField: 'sales',
    label: {
      // 可手動(dòng)配置 label 數(shù)據(jù)標(biāo)簽位置
      position: 'middle',
      // 'top', 'bottom', 'middle',
      // 配置樣式
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: '類別',
      },
      sales: {
        alias: '銷售額',
      },
    },
  }
  return <div>
    <Column {...config} />
  </div>
}
export default Home

組件封裝（封裝Echarts組件示例）

1.在components下新建組件

這里名字為Bar，目錄結(jié)構(gòu)如下：

2. components/Bar/index.js

// Bar組件  子組件
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
 
// 將用來自定義的提取出來
const Bar = ({ title, xData, yData, style }) => {
  const domRef = useRef()
 
  useEffect(() => {
    chartTnit()
  }, [])
 
  const chartTnit = () => {
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    const myChart = echarts.init(domRef.current)
 
    // 繪制圖表
    myChart.setOption({
      title: {
        text: title
      },
      tooltip: {},
      xAxis: {
        data: xData
      },
      yAxis: {},
      series: [
        {
          name: '銷量',
          type: 'bar',
          data: yData
        }
      ]
    })
  }
 
  return (<div>
    {/* 掛載節(jié)點(diǎn) */}
    <div ref={domRef} style={style}></div>
  </div>)
}
export default Bar

3.Home/index.js

//Home組件  父組件
import Bar from '@/components/Bar'
 
const Home = () => {
  return (<div>
    {/* 使用Bar組件 */}
    <Bar
      title='ECharts 入門示例111'
      xData={['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']}
      yData={[5, 20, 36, 10, 10, 20]}
      style={{ width: '500px', height: '500px' }} />
 
    <Bar
      title='ECharts 入門示例222'
      xData={['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']}
      yData={[5, 20, 36, 10, 10, 20]}
      style={{ width: '500px', height: '500px' }} />
 
  </div>)
}
export default Home