1. 程式人生 > >基於Echarts4.0實現旭日圖

基於Echarts4.0實現旭日圖

value 效果 etop 並且 團隊 doc 格式 大連 mst

昨天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實現旭日圖