前言：其实学习和使用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
},
...
}
}
