echarts中的小小小小坑（一）

   前言：其实学习和使用echarts已经有一段时间了，本来打算边学边记录自己的学习经过，奈何计划赶不上变化（懒，更新随缘）。
   首先，当然是附上官网：echarts。老实说学习任何东西，看再多的教程都不如细读一遍官方文档。如果不是只要求实现效果，还是建议去研读官方的东西。
   这篇文章不会详细介绍echarts的东西，只是简单总结了我使用过程中遇到的一些小问题，目的在于提醒自己不要在一个坑跌倒两次。
   环境：react+node.js+echarts

1.关于echarts的使用

   echarts的绘制在页面渲染之后，即必须存在真实的节点之后，echarts才能正常绘制，从react的角度来说，就是得在componentDidMount()这个生命周期以及之后的生命周期中调用echarts：

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

  如果在页面渲染之前（如 componentDidMount()）调用，就会报如下错误：

错误
  另外，如果你想重绘echarts，请使用myChart.setOption(option)函数。
  最后一点，绑定echarts的节点必须具有具体的宽高，否则，它会默认100px*100px的宽高进行绘制。

2.echarts部分配置项

  详细的配置项请移步官方配置文档。

2.1 grid（网格）

  grid常用于多个图表，并且需要对每个图的位置进行调整，比如这种情况：

多图表
  重点：grid请配合xAxis、yAxis使用：

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,
      ...
    }]

  当然，如果对图的位置没有需求，请不要大意的使用xAxis、yAxis吧。

2.2 formatter自定义文本

  这是一个相当常用的属性，通过它，我们可以实现各种各样的文本展示。

2.2.1 字符串模板

  常用的模板变量：
{a}:系列名
{b}:数据名
{c}:数据值
{d}:数据百分比
用法：formatter:'{b}:{c}'

2.2.2 回调函数

  利用它可以实现个性化文本（很重要）。

formatter:function(params){
        console.info(params)//里面存有我们可能会用到所有数据，当你不知道怎么取时，请输出来看一看
        return params.value
}

文本丰富了，样式自然也有可能要求个性化，所以formatter搭配rich使用效果更佳：

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{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
        },
        ...
    }
}