ECharts框架Sunburst拖拽功能實現方案詳解

2022-12-25 14:02:06

unburst

要建立日出圖表，需要在系列設定項中宣告一系列型別“sunburst”，並在樹結構中宣告其資料：

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
        }]
    }
};

它由多層環圖組成。在資料結構方面，內圈是外圈的父節點。因此，它不僅可以像餅圖一樣表示部分和整體的比例，還可以像矩形樹形圖一樣表示層次關係。

預設情況下，使用全域性調色盤指定最內層的顏色，其他層的顏色與其父元素相同。在日出圖表中，磁區塊的顏色可以通過以下三種方式設定：串聯。data每個磁區塊的樣式在itemStyle中設定；在系列中。levels設定itemStyle中每個層的樣式；在系列中，整個日出圖表的樣式設定為itemStyle。以上三者的優先順序從高到低，即系列。資料已設定itemStyle的磁區塊將覆蓋系列。級別ItemStyle和ItemStyle的系列設定。接下來，我們將整體顏色設定為灰色“#aaa”，最裡面的顏色設定為藍色“藍色”，Aa和B顏色設定為紅色“紅色”。`在這裡插入程式碼片

   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'
        },

日出圖是一個層次結構。為了便於設定相同的圖層樣式，我們提供了級別設定項。它是一個陣列，其中項0表示向下鑽取資料後返回到上層的圖形，每個後續項表示從圓心到外層的級別。例如，如果我們沒有資料鑽取功能，並且希望將最裡面的磁區塊的顏色設定為紅色，將文字設定為藍色，我們可以如下設定。當滑鼠移動到磁區塊時，日出圖表支援突出顯示相關資料塊。可以設定highlightPolicy，包括以下突出顯示方法： “descendant”（預設）：突出顯示滑鼠移動的磁區塊及其後代元素； “祖先”：突出顯示滑鼠所在的磁區塊及其祖先元素； “self”：僅突出顯示滑鼠所在的磁區塊； “無”：其他元素不會被淡化。上面提到的“高亮顯示”將使用滑鼠所在磁區塊的強調樣式；對於其他相關的磁區塊，將使用高光樣式。通過這種方式，可以很容易地實現突出顯示相關資料的需要。

具體而言，對於設定項：

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

拖拽

convertToPixel API用於將資料轉換為畫素座標，從而可以獲得每個點的位置，並繪製這些點。myChart。在語句convertToPixel（'grid'，dataItem）中，第一個引數'grid'表示dataItem在網格元件（即直角座標系）中轉換。所謂的“畫素座標”是指以容器的dom元素的左上角為零點的基於畫素的座標系中的座標。注意，這應該在第一個setOption之後完成，也就是說，只有在網格初始化convertToPixel（'grid'，dataItem）之後才能呼叫myChart 使用此程式碼，可以拖動多個點。接下來，為每個點新增拖動響應事件：

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

宣告一個 graphic component，裡面有若干個 type 為 'circle' 的 graphic elements。這裡使用了 echarts.util.map 這個幫助方法，其行為和 Array.prototype.map 一樣，但是相容 es5 以下的環境。用 map 方法遍歷 data 的每項，為每項生成一個圓點。用 transform 的方式對圓點進行定位。position: [x, y] 表示將圓點平移到 [x, y] 位置。這裡使用了 convertToPixel 這個 API 來得到每個圓點的位置。此圓點的拖拽的響應事件，在拖拽過程中會不斷被觸發。下面介紹詳情。這裡使用了 echarts.util.curry 這個幫助方法，意思是生成一個與 onPointDragging 功能一樣的新的函數，只不過第一個引數永遠為此時傳入的 dataIndex 的值。

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

此時，完成了拖動的基本功能。但是，如果要在拖動過程中進一步實時檢視拖動點的資料值更改，可以使用工具提示元件實時顯示該值。然而，Tooltip有其預設的“顯示”和“隱藏”觸發規則，這在我們的拖放場景中不適用。因此，我們還需要手動自定義工具提示的“顯示”和“隱藏”行為。

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 的時候顯示，在 mouseout 的時候隱藏。此時，完成了拖動的基本功能。但是，如果要在拖動過程中進一步實時檢視拖動點的資料值更改，可以使用工具提示元件實時顯示該值。然而，Tooltip有其預設的“顯示”和“隱藏”觸發規則，這在我們的拖放場景中不適用。因此，我們還需要手動自定義工具提示的“顯示”和“隱藏”行為。

以上就是ECharts框架Sunburst拖拽功能實現方案詳解的詳細內容，更多關於ECharts Sunburst拖拽的資料請關注it145.com其它相關文章！

ECharts框架Sunburst拖拽功能實現方案詳解

目錄

unburst

拖拽

熱門文章