在React中使用echarts,封装echarts组件

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