基於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(多層配置):
多層配置(比如說旭日圖最外層的陽光就得用到它,通過他配置每一層的樣式);
例如,將最外層的扇形塊的標籤向外顯示,形成陽光效果,可以這樣設定:
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);
搞定收工