基於Echarts4.0實現旭日圖
昨天Echarts4.0正式發布,隨著4.0而來的是一系列的更新,挑幾個主要的簡單說明:
1.展示方面通過增量渲染技術（4.0+）ECharts 能夠展現千萬級的數據量
2.針對移動端優化,移動端小屏上適於用手指在坐標系中進行縮放、平移。可選的 SVG 渲染模塊讓圖表在移動端更加節省內存。
3.增加多種渲染方案,可實現跨平臺使用,現有三種方案,可渲染Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動端不再為內存擔憂，Canvas 可以輕松應對大數據量和特效的展現。
4.從 4.0 開始通過和微信小程序的團隊合作，提供了 ECharts 對小程序的適配！(目前功能開發完畢,內測中,等待微信開發者工具更新,超激動!!!!!!)
5.無障礙訪問(4.0+),支持自動根據圖表配置項智能生成描述，使得盲人可 以在朗讀設備的幫助下了解圖表內容，讓圖表可以被更多人群訪問
6.增加旭日圖圖表
旭日圖嘗鮮:
旭日圖也稱為太陽圖（長得確很像太陽，層級關系也很像地球的內部結構），層次結構中每個級別的比例通過1個圓環表示，離原點越近代表圓環級別越高，最內層的圓表示層次結構的頂級，然後一層一層去看數據的占比情況。另外，有人說旭日圖是圓環圖的子集，其實可以這樣理解，因為當數據不存在分層，這時旭日圖=圓環圖。
實例:實現一個省市區的旭日圖
1.html-----這個就不說了
<div id="sun" style="width: 500px;height: 500px;"></div>
2.配置項(部分常用);
type(類型):
設置為‘sunburst‘
type: ‘sunburst‘
center(圖的坐標):
默認是[50%,50%],居中顯示
旭日圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。
支持設置成百分比，設置成百分比時第一項是相對於容器寬度，第二項是相對於容器高度。
center: [‘50%‘, ‘50%‘]
levels(多層配置):
多層配置(比如說旭日圖最外層的陽光就得用到它,通過他配置每一層的樣式);
例如，將最外層的扇形塊的標簽向外顯示,形成陽光效果，可以這樣設置：
levels: [{}, {}, {}, {},
{
// 最後一層
label: {
position: ‘outside‘,
padding: 3,
silent: false
},
itemStyle: {borderWidth: 3}
}
],
data(數據):
data的數據格式是樹狀的，例如：
[{ name: ‘parent1‘, value: 10, // 可以不寫父元素的 value，則為子元素之和； // 如果寫了，並且大於子元素之和，可以用來表示還有其他子元素未顯示 children: [{ value: 5, name: ‘child1‘, children: [{ value: 2, name: ‘grandchild1‘, itemStyle: { // 每個數據可以有自己的樣式，覆蓋 series.itemStyle 和 level.itemStyle }, label: { // 標簽樣式，同上 } }] }, { value: 3, name: ‘child2‘ }], itemStyle: { // parent1 的圖形樣式，不會被後代繼承 }, label: { // parent1 的標簽樣式，不會被後代繼承 } }, { name: ‘parent2‘, value: 4 }]series[i]-sunburst------->data[i]----->value 數字
數據值，如果包含 children，則可以不寫 value 值。這時，將使用子元素的 value 之和作為父元素的 value。如果 value 大於子元素之和，可以用來表示還有其他子元素未顯示。
series[i]-sunburst.data[i].name 字符串
顯示在扇形塊中的描述文字。
series[i]-sunburst.data[i].children 數組子節點，遞歸定義，格式同 series-sunburst.data。
配置完成代碼js
var myCharts = echarts.init(document.getElementById(‘sun‘)); var option = { series: { type: ‘sunburst‘, center: [‘50%‘, ‘50%‘], levels: [{}, {}, {}, {}, { label: { position: ‘outside‘, padding: 3, silent: false }, itemStyle: { borderWidth: 3 } }], data: [{ name: ‘遼寧省‘, children: [{ name: ‘沈陽市‘, children: [{ name: ‘沈河區‘, children: [{ name: ‘抽煙人數‘, value: 20 },{ name: ‘不抽煙人數‘, value: 40 }] }, { name: ‘大東區‘, value: 40 }, { name: ‘沈北新區‘, value: 40 }, { name: ‘鐵西區‘, children: [{ name: ‘抽煙人數‘, value: 40 },{ name: ‘不抽煙人數‘, value: 20 }] } ] }, { name: ‘朝陽市‘, value: 10 }, { name: ‘大連市‘, value: 10 }, { name: ‘鐵嶺市‘, value: 10 }, { name: ‘撫順市‘, value: 10 }, ] }, { name: ‘吉林省‘, value: 20 }, { name: ‘黑龍江省‘, value: 20 }, { name: ‘河北省‘, children: [{ name: ‘鄭州市‘, children: [{ name: ‘1區‘, value: 70 }, { name: ‘2區‘, value: 40 }, { name: ‘3區‘, value: 40 }, { name: ‘4區‘, value: 5 } ] }, { name: ‘信陽市‘, value: 20 }, { name: ‘安陽市‘, value: 10 }, { name: ‘邯鄲市‘, value: 30 }, { name: ‘承德市‘, value: 5 }, ] }] } }; myCharts.setOption(option);
搞定收工
基於Echarts4.0實現旭日圖