记--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)。。。

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