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

歡迎指出錯誤，或者提問。