在React中使用echarts,封裝echarts元件

阿新 • • 發佈：2020-12-15

01、在React中使用echarts

開始先百度如何在react專案中使用echarts。

按照百度到的步驟寫，安裝然後引入echars-for-react這個包。

編譯沒有錯。

但是瀏覽器報錯：

dispose 和 getInstanceByDom 的prototype undefinded。

因為我用的是函式式元件，沒有生命週期。我一開始懷疑是不是因為函式式元件的問題。

我換成了類元件之後，還是報同樣的錯。

沒辦法我只能去官網，按照官方的在 webpack 中使用 ECharts。

如下所示成功了！

import './index.css' 
;
import React, { Component } from 'react'
// import ReactEcharts from "echarts-for-react"
import  * as echarts from 'echarts'
export class Index extends Component {
  componentDidMount(){
    this.getOption()
  }
  getOption = () => {
    var myChart = echarts.init(document.getElementById 
('main'));
    myChart.setOption({
      title: {
          text: 'ECharts 入門示例'
      },
      tooltip: {},
      xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
      },
      yAxis: {},
      series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 
 20]
      }]
  });
  }

  
  render() {
    return (
      <div id="main" style={{height:"300px"}}>
        
      </div>
    )
  }
}

ReactDOM.render(
<Index />,
  document.getElementById('root')
);

之後我就按照這個方式，在自己的專案中使用封裝了echtarts元件。

新的問題

echars是使用成功了。但是給表格設定寬度為100%的時候，圖表的大小會超過父元素，溢位螢幕。

百度了下

原來是echarts圖表只繪製一次，繪製的時候會自動獲取父級的大小填寫寬度。

所有讓echarts延時繪製。

 componentDidMount () {
        setTimeout(() => {
        this.getOption()
        })
    }

**完整程式碼如下:**echarts元件封裝成功。

import React, { Component } from 'react'
import * as echarts from 'echarts'
export class Index extends Component {
    
    componentDidMount () {
        setTimeout(() => {
        this.getOption()
        })
    }

    getOption = () => {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: '場站趨勢分析'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['充電次數', '充電量', '充電時長', '消費金額']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['0', '1', '2', '3', '4', '5', '6']
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: "2%"
            },
            series: [
                {
                    name: '充電次數',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210],
                    smooth: true
                },
                {
                    name: '充電量',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310],
                    smooth: true
                },
                {
                    name: '充電時長',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410],
                    smooth: true
                },
                {
                    name: '消費金額',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320],
                    smooth: true
                }
            ]
})
}

  render() {
    return (
      <div id = "main" style={{ height: '550px', width:"100%",backgroundColor:'#fff'}}>
      </div>
    )
  }
}

export default Index