记--react中echarts初探，踩坑

因项目需要，开启了echarts之路。。。

官方配置是这样的，基础的撸法这里都有，想玩点花样，就得自己啃文档&脑洞大开。

官方API这个API，个人觉得不是那么容易让人一看就会用。。。(OS：可能因为我智商不够)

在react中使用，开始还以为需要某一个特殊的npm包，但是公司大神曰：“正常用就行。”遂，简单粗暴开撸。

首先 npm install echarts

其次 在代码里引入

import { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line'; // 这里引入你要的那一个表 按照 node_modules了路径填入

class Fuck extends PureComponent{
    // 提前BB，我这边是通过state改变去render，所以用state挂载。
    // 如果有其他玩法，可以不这么玩
    state = {
        line: null, 
    }
    
    componentDidMount() {
        const line = echarts.init(document.getElementById("anyFuckId"));
        this.setState({ line });
    }
    
    render(){
        const option = {
            // 这里就是按照上面的配置项填入你要的东西就可以了
        }
        if (this.state.line) {
            // 用setOption(obj) 来设置
            this.state.line.setOption(option);
        }
        return null;
    }
}

基础玩法就这样，主要是render中，如果你需要的option是从state或者props中获得，就const {anyFuckOption} = this.state;或者 const {anyFuckOption} = this.props之后再丢给option，虽然这是一句废话，但是这样后期修改起来不会太难过。。。

下面说一下 事件

点击事件

chart.on('click', (param) => {
    // 这里是可点击的点，你要添加你自己的事件的玩法。param是一个事件对象，里面有你点击的这个点对应的信息(包括index)，以及 它对应的值。
    console.log(param);
})

时间轴的点 事件

chart.on('timelinechanged', (param) => {
//这个是 时间轴的点自动切换的时候的回调事件，如果你想给时间轴玩花样，可以在这里玩耍，param也是一个对象，有当前点的index和其他相关信息。
    console.log(param);
})

笔记打完收工，后期不定时更新。。。 纯属个人整理。如有雷同。纯(zhen)属(te)巧(me)合(qiao)。。。

欢迎指出错误，或者提问。