1.Echarts 餅狀圖 基礎(chǔ)配置
Echarts 基礎(chǔ)配置推薦 官網(wǎng)
http://echarts.baidu.com/option.html#title
所有的配置都在option里面主要分圖表，圖例，標(biāo)題等。接下來(lái)我們一個(gè)一個(gè)看。
（1）標(biāo)題title
主要常用的的是標(biāo)題（title），副標(biāo)題（subtext），標(biāo)題所在的位置（x），文本顏色（itemstyle）。
（2）圖表（series）
都在series設(shè)置，主要包括位置（center），大小（radius），類型（type），數(shù)據(jù)（data）等。
（3）圖例（legend）
都在legend里面設(shè)置，主要包括數(shù)據(jù)（data），字體的設(shè)置（textStyle），高度（height），寬度（width），位置（方位）等。
2.高度自適應(yīng)
先看下我的業(yè)務(wù)需求。
因?yàn)閳D例可能有一個(gè)也可能有多個(gè)，所以需要自適應(yīng)高度，但是當(dāng)我高度設(shè)置為auto的時(shí)候，發(fā)現(xiàn)居然是0px。所有的都是0px。然后我審查元素后發(fā)現(xiàn)Echarts會(huì)在我寫的div中加一個(gè)div里面還加了canvas，canvas的高度取決于他父盒子的高度。那我就開始想讓父盒子高度等于放對(duì)應(yīng)數(shù)據(jù)盒子的高度，當(dāng)我用js設(shè)置成功后，發(fā)現(xiàn)圖例并沒有由兩行換成一行，而是拉伸了，看來(lái)這個(gè)方法不行。
經(jīng)過(guò)我不斷的百度，找到了設(shè)置高度方法
container是canvas的父盒子，我修改她的高度，因?yàn)橐鶕?jù)圖例的大小設(shè)置整體高度，所以去我需要知道后臺(tái)會(huì)有幾個(gè)圖例，以及一個(gè)圖例的高。來(lái)設(shè)置canvas的父盒子的高。我在網(wǎng)上找到了方法能知道有幾個(gè)圖例，就是option.series[0].data,length的方法。順利高度自適應(yīng)了。
但是當(dāng)只有一個(gè)圖例的時(shí)候，高度很小，圖表的一部分會(huì)看不見。所以有限制了一下最小的高度。
3.formatter
我原來(lái)是左右布局，下面這種方式，但是發(fā)現(xiàn)手機(jī)的不同，圖例和實(shí)現(xiàn)白分比的地方總是對(duì)不齊，所以我放棄了這種布局方式。
對(duì)齊了但是新的問(wèn)題又來(lái)了
這看著也太丑了。所以我想往上面拼接空格。但是因?yàn)榍懊娴淖钟卸嘤猩?，后面百分百很難對(duì)其。我在官網(wǎng)上找到了方法formatter
紅色部分是代碼是關(guān)鍵，讓圖例和百分比分開，我又加了個(gè)小的改進(jìn)，多出7個(gè)子用...代替，這個(gè)功能總算是圓滿完成了。開心。
