ECharts框架分段視覺對映在行動端適配

2022-12-25 14:02:02

行動端適配

滿足多個查詢時的優先順序：請注意，可以同時滿足多個查詢，並且它們都將由mergeOption合併，mergeOption稍後由merge定義（即更高的優先順序）。預設查詢：如果媒體中有一項不寫入查詢，則表示“預設值”。也就是說，如果不符合所有規則，則採用此選項。容器尺寸實時變化時的注意事項：

在許多情況下，不需要通過拖動任意改變容器DOM節點的大小，而是根據不同的終端設定幾個典型的大小。但是，如果容器DOM節點需要能夠通過拖動任意更改其大小，那麼在當前使用它時應該注意這一點：如果設定項出現在查詢選項中，那麼它也必須出現在其他查詢選項中。否則，它無法返回到原始狀態。（左/右/上/下/寬/高不受此限制。）

   {
        query: {
            maxWidth: 500               // 當容器寬度小於 500 時。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右側中間。
                top: '15%',
                orient: 'vertical'      // 縱向佈局。
            },
            series: [                   // 兩個餅圖上下佈局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

複合選項中的媒體不支援合併也就是說，當設定了setOption（rawOption）時，如果rawOption是一個複合選項（包括媒體列表），則新的rawOption媒體列表不會與舊媒體列表合併，而是簡單地替換。當然，baseOption通常仍會與舊選項合併。事實上，很少有場景需要使用“複合選項”多次設定該選項。我們建議的做法是，在使用mediaQuery時，對第一個setOption使用“複合選項”，而對後面的setOption只使用“原子選項”，也就是說，只使用setOption更改baseOption。

{
    minWidth: 200,
    maxHeight: 300,
    minAspectRatio: 1.3
}

現在支援三個屬性：width、height和aspectRatio。每個屬性的字首都可以是min或max。例如，minWidth:200表示“大於或等於200px寬度”。這兩個屬性寫在一起表示“和”。例如，｛minWidth:200，maxHeight:300｝表示“寬度大於或等於200px，高度小於或等於300px”。選項：由於媒體中的選項是原子選項，理論上，可以編寫任何選項設定項。但通常情況下，我們只寫佈局定位，例如攔截上面範例中的一些查詢選項：

option = {
    // 這裡是基本的『原子option』。
    title: {...},
    legend: {...},
    series: [{...}, {...}, ...],
    ...,
    media: [ //
        {
            query: {...},   // 這裡寫規則。
            option: {       // 這裡寫此規則滿足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二個規則。
            option: {       // 第二個規則對應的option。
                legend: {...},
                ...
            }
        },
        {                   // 
            option: {       // 
                legend: {...},
                ...
            }
        }
    ]
};

這裡定義了 media query 的逐條規則。這條裡沒有寫規則，表示『預設』，即所有規則都不滿足時，採納這個option。

資料和維度

ECharts中的資料通常儲存在系列資料中。根據圖表的型別，資料的具體形式可能略有不同。例如，它可以是線性表、樹或圖形。但它們都有一個共同點：它們是“資料項”的集合。每個資料項包含“值”和其他資訊（如有必要）。每個資料值可以是單個數值（一維）或陣列（多維）。例如，series最常見的資料形式是“線性表”，即常見的陣列：這裡每一個項就是資料項（dataItem），這是資料項的資料值（value）

series: {
    data: [
        {    
            value: 2323, // 
            itemStyle: {...}
        },
        1212,   // 
        2323,   // 
        4343,
        3434
    ]
}

也可以直接是 dataItem 的 value，這更常見。每個 value 都是『一維』的。

分段視覺對映元件

分段視覺對映元件（visualMapPiecewise）有三種模式：連續資料的平均分割：根據visualMap Peerswise SplitNumber自動平均分割成幾個塊。連續資料的自定義分割：根據visualMap Piecewise Pieces定義每個塊的範圍。離散資料（分類資料）：類別在visualMap pricewise Categories中定義。視覺化對映模式的設定由於這是“資料”到“視覺元素”的對映，因此可以在visualMap中指定資料的“哪個維度”（參見visualMap.dimension），以對映到哪個“視覺元素“（參見visualMap.inRange和visualMap.outOfRange）。

option = {
    visualMap: [
        {
            type: 'piecewise',
            min: 0,
            max: 5000,
            dimension: 3,      
            seriesIndex: 4,     
            inRange: {          
                color: ['blue', '#121122', 'red'],
                symbolSize: [30, 100]               
            },
            outOfRange: {       // 選中範圍外的視覺設定
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

series.data 的第四個維度（即 value[3]）被對映，series.data 的第四個維度（即 value[3]）被對映。

事件和行為

myChart.on('click', function (params) {
    console.log(params.name);
});

在ECharts中，事件可以分為兩種型別：一種是使用者用滑鼠單擊時觸發的事件，或者是懸停圖表的圖形；另一種是使用者使用可以互動的元件後觸發的行為事件，例如切換圖例開關時觸發的“legendseletchanged”事件（請注意，切換圖例開關不會觸發“legendselect tchchanged”事件），縮放資料區域時觸發的”datazoom“事件。

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        if (params.seriesIndex === 5) {
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
            }
            else {
            }
        }
    }
});

點選到了 markPoint 上，點選到了 index 為 5 的 series 的 markPoint 上。點選到了 graph 的 edge（邊）上。點選到了 graph 的 node（節點）上。在ECharts中，幾乎所有的元件互動都會觸發相應的事件。事件檔案中列出了常見事件和事件對應引數。

以上就是ECharts框架分段視覺對映在行動端適配的詳細內容，更多關於ECharts分段視覺對映的資料請關注it145.com其它相關文章！

ECharts框架分段視覺對映在行動端適配

目錄

行動端適配

資料和維度

分段視覺對映元件

事件和行為

熱門文章