unburst

要?jiǎng)?chuàng)建日出圖表，需要在系列配置項(xiàng)中聲明一系列類型“sunburst”，并在樹結(jié)構(gòu)中聲明其數(shù)據(jù)：

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa'
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }]
        }, {
            name: 'C',
            value: 3
        }]
    }
};

它由多層環(huán)圖組成。在數(shù)據(jù)結(jié)構(gòu)方面，內(nèi)圈是外圈的父節(jié)點(diǎn)。因此，它不僅可以像餅圖一樣表示部分和整體的比例，還可以像矩形樹形圖一樣表示層次關(guān)系。

默認(rèn)情況下，使用全局調(diào)色板指定最內(nèi)層的顏色，其他層的顏色與其父元素相同。在日出圖表中，扇區(qū)塊的顏色可以通過以下三種方式設(shè)置： 串聯(lián)。data每個(gè)扇區(qū)塊的樣式在itemStyle中設(shè)置； 在系列中。levels設(shè)置itemStyle中每個(gè)層的樣式； 在系列中，整個(gè)日出圖表的樣式設(shè)置為itemStyle。 以上三者的優(yōu)先級(jí)從高到低，即系列。數(shù)據(jù)已配置itemStyle的扇區(qū)塊將覆蓋系列。級(jí)別ItemStyle和ItemStyle的系列設(shè)置。 接下來，我們將整體顏色設(shè)置為灰色“#aaa”，最里面的顏色設(shè)置為藍(lán)色“藍(lán)色”，Aa和B顏色設(shè)置為紅色“紅色”。`在這里插入代碼片

   type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa',
                itemStyle: {
                    color: 'red'
                }
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }],
            itemStyle: {
                color: 'red'
            }
        }, {
            name: 'C',
            value: 3
        }],
        itemStyle: {
            color: '#aaa'
        },

日出圖是一個(gè)層次結(jié)構(gòu)。為了便于配置相同的圖層樣式，我們提供了級(jí)別配置項(xiàng)。它是一個(gè)數(shù)組，其中項(xiàng)0表示向下鉆取數(shù)據(jù)后返回到上層的圖形，每個(gè)后續(xù)項(xiàng)表示從圓心到外層的級(jí)別。 例如，如果我們沒有數(shù)據(jù)鉆取功能，并且希望將最里面的扇區(qū)塊的顏色設(shè)置為紅色，將文本設(shè)置為藍(lán)色，我們可以如下設(shè)置。 當(dāng)鼠標(biāo)移動(dòng)到扇區(qū)塊時(shí)，日出圖表支持突出顯示相關(guān)數(shù)據(jù)塊?？梢栽O(shè)置highlightPolicy，包括以下突出顯示方法： “descendant”（默認(rèn)）：突出顯示鼠標(biāo)移動(dòng)的扇區(qū)塊及其后代元素； “祖先”：突出顯示鼠標(biāo)所在的扇區(qū)塊及其祖先元素； “self”：僅突出顯示鼠標(biāo)所在的扇區(qū)塊； “無”：其他元素不會(huì)被淡化。 上面提到的“高亮顯示”將使用鼠標(biāo)所在扇區(qū)塊的強(qiáng)調(diào)樣式；對(duì)于其他相關(guān)的扇區(qū)塊，將使用高光樣式。通過這種方式，可以很容易地實(shí)現(xiàn)突出顯示相關(guān)數(shù)據(jù)的需要。

具體而言，對(duì)于配置項(xiàng)：

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}

拖拽

convertToPixel API用于將數(shù)據(jù)轉(zhuǎn)換為像素坐標(biāo)，從而可以獲得每個(gè)點(diǎn)的位置，并繪制這些點(diǎn)。myChart。在語(yǔ)句convertToPixel（'grid'，dataItem）中，第一個(gè)參數(shù)'grid'表示dataItem在網(wǎng)格組件（即直角坐標(biāo)系）中轉(zhuǎn)換。所謂的“像素坐標(biāo)”是指以容器的dom元素的左上角為零點(diǎn)的基于像素的坐標(biāo)系中的坐標(biāo)。 注意，這應(yīng)該在第一個(gè)setOption之后完成，也就是說，只有在網(wǎng)格初始化convertToPixel（'grid'，dataItem）之后才能調(diào)用myChart 使用此代碼，可以拖動(dòng)多個(gè)點(diǎn)。接下來，為每個(gè)點(diǎn)添加拖動(dòng)響應(yīng)事件：

myChart.setOption({
    graphic: echarts.util.map(data, function (dataItem, dataIndex) {
        return {
            // 'circle' 表示這個(gè) graphic element 的類型是圓點(diǎn)。
            type: 'circle',
            shape: {
                // 圓點(diǎn)的半徑。
                r: symbolSize / 2
            },
            position: myChart.convertToPixel('grid', dataItem),
            // 這個(gè)屬性讓圓點(diǎn)不可見（但是不影響他響應(yīng)鼠標(biāo)事件）。
            invisible: true,
            // 這個(gè)屬性讓圓點(diǎn)可以被拖拽。
            draggable: true,
            // 把 z 值設(shè)得比較大，表示這個(gè)圓點(diǎn)在最上方，能覆蓋住已有的折線圖的圓點(diǎn)。
            z: 100,
            ondrag: echarts.util.curry(onPointDragging, dataIndex)
        };
    })
});

聲明一個(gè) graphic component，里面有若干個(gè) type 為 'circle' 的 graphic elements。 這里使用了 echarts.util.map 這個(gè)幫助方法，其行為和 Array.prototype.map 一樣，但是兼容 es5 以下的環(huán)境。 用 map 方法遍歷 data 的每項(xiàng)，為每項(xiàng)生成一個(gè)圓點(diǎn)。 用 transform 的方式對(duì)圓點(diǎn)進(jìn)行定位。position: [x, y] 表示將圓點(diǎn)平移到 [x, y] 位置。 這里使用了 convertToPixel 這個(gè) API 來得到每個(gè)圓點(diǎn)的位置。 此圓點(diǎn)的拖拽的響應(yīng)事件，在拖拽過程中會(huì)不斷被觸發(fā)。下面介紹詳情。 這里使用了 echarts.util.curry 這個(gè)幫助方法，意思是生成一個(gè)與 onPointDragging 功能一樣的新的函數(shù)，只不過第一個(gè)參數(shù)永遠(yuǎn)為此時(shí)傳入的 dataIndex 的值。

myChart.setOption({
    ...,
    tooltip: {
        // 表示不使用默認(rèn)的『顯示』『隱藏』觸發(fā)規(guī)則。
        triggerOn: 'none',
        formatter: function (params) {
            return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
        }
    }
});

此時(shí)，完成了拖動(dòng)的基本功能。但是，如果要在拖動(dòng)過程中進(jìn)一步實(shí)時(shí)查看拖動(dòng)點(diǎn)的數(shù)據(jù)值更改，可以使用工具提示組件實(shí)時(shí)顯示該值。然而，Tooltip有其默認(rèn)的“顯示”和“隱藏”觸發(fā)規(guī)則，這在我們的拖放場(chǎng)景中不適用。因此，我們還需要手動(dòng)自定義工具提示的“顯示”和“隱藏”行為。

myChart.setOption({
    graphic: echarts.util.map(data, function (item, dataIndex) {
        return {
            type: 'circle',
            ...,
            onmousemove: echarts.util.curry(showTooltip, dataIndex),
            onmouseout: echarts.util.curry(hideTooltip, dataIndex),
        };
    })
});
function showTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
    });
}
function hideTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'hideTip'
    });
}

在 mouseover 的時(shí)候顯示，在 mouseout 的時(shí)候隱藏。 此時(shí)，完成了拖動(dòng)的基本功能。但是，如果要在拖動(dòng)過程中進(jìn)一步實(shí)時(shí)查看拖動(dòng)點(diǎn)的數(shù)據(jù)值更改，可以使用工具提示組件實(shí)時(shí)顯示該值。然而，Tooltip有其默認(rèn)的“顯示”和“隱藏”觸發(fā)規(guī)則，這在我們的拖放場(chǎng)景中不適用。因此，我們還需要手動(dòng)自定義工具提示的“顯示”和“隱藏”行為。

以上就是ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解的詳細(xì)內(nèi)容，更多關(guān)于ECharts Sunburst拖拽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論