?? 前言：其實學(xué)習(xí)和使用echarts已經(jīng)有一段時間了，本來打算邊學(xué)邊記錄自己的學(xué)習(xí)經(jīng)過辜膝，奈何計劃趕不上變化（懶袒餐，更新隨緣）。
?? 首先谤狡，當(dāng)然是附上官網(wǎng)：echarts灸眼。老實說學(xué)習(xí)任何東西，看再多的教程都不如細(xì)讀一遍官方文檔墓懂。如果不是只要求實現(xiàn)效果焰宣，還是建議去研讀官方的東西。
?? 這篇文章不會詳細(xì)介紹echarts的東西捕仔，只是簡單總結(jié)了我使用過程中遇到的一些小問題匕积，目的在于提醒自己不要在一個坑跌倒兩次。
?? 環(huán)境：react+node.js+echarts

1.關(guān)于echarts的使用

?? echarts的繪制在頁面渲染之后榜跌，即必須存在真實的節(jié)點之后闪唆，echarts才能正常繪制，從react的角度來說钓葫，就是得在componentDidMount()這個生命周期以及之后的生命周期中調(diào)用echarts：

  componentDidMount() {
        let data=this.props.data;
        if(data!=undefined){
            this.barChart(data,0);
        }
    }

??如果在頁面渲染之前（如 componentDidMount()）調(diào)用悄蕾，就會報如下錯誤：

錯誤

2.echarts部分配置項

??詳細(xì)的配置項請移步官方配置文檔影锈。

2.1 grid（網(wǎng)格）

??grid常用于多個圖表芹务，并且需要對每個圖的位置進(jìn)行調(diào)整蝉绷，比如這種情況：

多圖表

grid: [{
        //左上圖
        x: '7%',//值越大越靠右
        y: '7%',//值越大越靠下
        width: '38%',
        height: '38%'
    }, {
        //右上圖
        x2: '7%',//值越大越靠左
        y: '7%',
        width: '38%',
        height: '38%'
    }, {
        //左下圖
        x: '7%',
        y2: '7%',//值越大越靠上
        width: '38%',
        height: '38%'
    }, {
        //右下圖
        x2: '7%',
        y2: '7%',
        width: '38%',
        height: '38%'
    }],
    xAxis: [{
        gridIndex: 0,
    }, {
        gridIndex: 1,
    }, {
        gridIndex: 2,
    }, {
        gridIndex: 3,
    }],
    yAxis: [{
        gridIndex: 0,
    }, {
        gridIndex: 1,
    }, {
        gridIndex: 2,
    }, {
        gridIndex: 3,
    }],
    series: [{
        ...
        xAxisIndex: 0,//x锄禽、y一一匹配潜必，0,1這樣的組合是不行的
        yAxisIndex: 0,
        ...
    }, {
        ...
        xAxisIndex: 1,
        yAxisIndex: 1,
        ...
    }, {
        ...
        xAxisIndex: 2,
        yAxisIndex: 2,
        ...
    }, {
       ...
        xAxisIndex: 3,
        yAxisIndex: 3,
      ...
    }]

??當(dāng)然，如果對圖的位置沒有需求沃但，請不要大意的使用xAxis磁滚、yAxis吧。

2.2 formatter自定義文本

??這是一個相當(dāng)常用的屬性宵晚，通過它垂攘，我們可以實現(xiàn)各種各樣的文本展示。

2.2.1 字符串模板

??常用的模板變量：
{a}:系列名
淤刃:數(shù)據(jù)名
{c}:數(shù)據(jù)值
vpeo0mv:數(shù)據(jù)百分比
用法：formatter:'晒他:{c}'

2.2.2 回調(diào)函數(shù)

??利用它可以實現(xiàn)個性化文本（很重要）。

formatter:function(params){
        console.info(params)//里面存有我們可能會用到所有數(shù)據(jù)逸贾，當(dāng)你不知道怎么取時陨仅，請輸出來看一看
        return params.value
}

文本豐富了，樣式自然也有可能要求個性化铝侵，所以formatter搭配rich使用效果更佳：

label: {
    // 在文本中灼伤，可以對部分文本采用 rich 中定義樣式。
    // 這里需要在文本中使用標(biāo)記符號：
    // `{styleName|text content text content}` 標(biāo)記樣式名咪鲜。
    // 注意狐赡，換行仍是使用 '\n'。
    formatter: [
        '{a|這段文本采用樣式a}',
        '{b|這段文本采用樣式b}這段用默認(rèn)樣式{x|這段用樣式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}