Echarts 饼状图 基础配置和高度自适应 formatter

1.Echarts 饼状图 基础配置

Echarts 基础配置推荐 官网

http://echarts.baidu.com/option.html#title

所有的配置都在option里面主要分图表，图例，标题等。接下来我们一个一个看。

（1）标题title

主要常用的的是标题（title），副标题（subtext），标题所在的位置（x），文本颜色（itemstyle）。

title

（2）图表（series）

都在series设置，主要包括位置（center），大小（radius），类型（type），数据（data）等。

可以是百分比也可以是数值

（3）图例（legend）

都在legend里面设置，主要包括数据（data），字体的设置（textStyle），高度（height），宽度（width），位置（方位）等。

2.高度自适应

先看下我的业务需求。

业务需求

因为图例可能有一个也可能有多个，所以需要自适应高度，但是当我高度设置为auto的时候，发现居然是0px。所有的都是0px。然后我审查元素后发现Echarts会在我写的div中加一个div里面还加了canvas，canvas的高度取决于他父盒子的高度。那我就开始想让父盒子高度等于放对应数据盒子的高度，当我用js设置成功后，发现图例并没有由两行换成一行，而是拉伸了，看来这个方法不行。

经过我不断的百度，找到了设置高度方法

这是我的整体代码

container是canvas的父盒子，我修改她的高度，因为要根据图例的大小设置整体高度，所以去我需要知道后台会有几个图例，以及一个图例的高。来设置canvas的父盒子的高。我在网上找到了方法能知道有几个图例，就是option.series[0].data,length的方法。顺利高度自适应了。

但是当只有一个图例的时候，高度很小，图表的一部分会看不见。所以有限制了一下最小的高度。

3.formatter

效果图

原来布局方式

我原来是左右布局，下面这种方式，但是发现手机的不同，图例和实现白分比的地方总是对不齐，所以我放弃了这种布局方式。

对齐了但是新的问题又来了

紧随其后

这看着也太丑了。所以我想往上面拼接空格。但是因为前面的字有多有少，后面百分百很难对其。我在官网上找到了方法formatter

红色部分是代码是关键，让图例和百分比分开，我又加了个小的改进，多出7个子用...代替，这个功能总算是圆满完成了。开心。