echarts在react中的使用

echars官网：https://www.echartsjs.com/zh/index.html

下载安装什么的网上一堆，我就不说了，直接总结自己的使用和踩的小坑。

一、引入：

import echarts from 'echarts';

在这里顺便一提，如果想使用echarts的3D图表，那么还有以下两个步骤：

npm i echarts-gl
import "echarts-gl"; 

二、准备容器：

<div id="graph" style={{width: '100%', height: '500px'}}></div>

然而在这一步我就踩坑了，首先是忘记设置高度，请一定要注意！！！容器一定要有高度，不然你是看不到你的图的。虽然这一步非常简单，然而容易被忽略，以为自己没下好依赖包或是没正确引入。还没完，就在我以为万事大吉的时候，我后来的开发中又遇到一个问题：图表死活没有渲染上去！！！一步一步找问题，最后发现根本没有获取到这个id为graph的标签。虽然没找到这个bug原因，但是后面还是找到了解决方法。就是如果你是基于react开发的话，我建议标签还是这样写：

<div ref="graph" style={{width: '100%', height: '500px'}}></div>

三、图表初始化：
这一步建议直接封装一个方法，因为后面操作图表，用的地方会很多。

// 图表初始化函数
newGraph() {
    // 如果用的是ref请用这种方法：
    let myChart = echarts.init(this.refs.graph);

    // 如果用的是id请用这种方法：
    // let myChart = echarts.init(document.getElementById('graph'));

    // 你的图表数据，单独拿出来是因为后面都要异步请求获取的
    let graphData = [120, 200, 150, 80, 70, 110, 130];

    // 图表配置项，可以查看官网及官方文档
    let option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: graphData,
            type: 'bar'
        }]
    };
    
    // 最后一步，设置option让图表和数据生效
    myChart.setOption(option, true);
}

四、异步请求：
再弄个方法处理异步请求的数据：

getData () {
    axios.get(url).then(res=>{
        let data = res.data.data;
        this.setState({data},()=>{
            this.newGraph(); // 数据处理完后调用图表初始化方法
        });
    });
}

别忘记调用：

componentDidMount() {
    this.getData();
}

五、父组件传参：
如果echarts图表是作为子组件引入，而参数是从父组件过来的话，那么还有一步就是利用生命周期componentWillReceiveProps来处理一下参数：

componentWillReceiveProps(nextProps) {
    let startDate = this.props.startDate;
    let endDate = this.props.endDate;
 
    if (nextProps.startDate !== this.props.startDate) {
        startDate = nextProps.startDate;
    }
    if (nextProps.endDate !== this.props.endDate) {
        endDate = nextProps.endDate;
    }
    this.setState({
        startDate,
        endDate,
    }, () => {
        this.getData();
    })
}

一般这类参数都是异步请求的参数，丢给getData()就行了，其他步骤都一样，也能在父组件处理完数据再传过来，根据需求和实际场景来。