移動(dòng)端適配

滿足多個(gè)查詢時(shí)的優(yōu)先級： 請注意，可以同時(shí)滿足多個(gè)查詢，并且它們都將由mergeOption合并，mergeOption稍后由merge定義（即更高的優(yōu)先級）。 默認(rèn)查詢： 如果媒體中有一項(xiàng)不寫入查詢，則表示“默認(rèn)值”。也就是說，如果不符合所有規(guī)則，則采用此選項(xiàng)。 容器尺寸實(shí)時(shí)變化時(shí)的注意事項(xiàng)：

在許多情況下，不需要通過拖動(dòng)任意改變?nèi)萜鱀OM節(jié)點(diǎn)的大小，而是根據(jù)不同的終端設(shè)置幾個(gè)典型的大小。 但是，如果容器DOM節(jié)點(diǎn)需要能夠通過拖動(dòng)任意更改其大小，那么在當(dāng)前使用它時(shí)應(yīng)該注意這一點(diǎn)：如果配置項(xiàng)出現(xiàn)在查詢選項(xiàng)中，那么它也必須出現(xiàn)在其他查詢選項(xiàng)中。否則，它無法返回到原始狀態(tài)。（左/右/上/下/寬/高不受此限制。）

   {
        query: {
            maxWidth: 500               // 當(dāng)容器寬度小于 500 時(shí)。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右側(cè)中間。
                top: '15%',
                orient: 'vertical'      // 縱向布局。
            },
            series: [                   // 兩個(gè)餅圖上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

復(fù)合選項(xiàng)中的媒體不支持合并 也就是說，當(dāng)設(shè)置了setOption（rawOption）時(shí)，如果rawOption是一個(gè)復(fù)合選項(xiàng)（包括媒體列表），則新的rawOption媒體列表不會(huì)與舊媒體列表合并，而是簡單地替換。當(dāng)然，baseOption通常仍會(huì)與舊選項(xiàng)合并。 事實(shí)上，很少有場景需要使用“復(fù)合選項(xiàng)”多次設(shè)置該選項(xiàng)。我們建議的做法是，在使用mediaQuery時(shí)，對第一個(gè)setOption使用“復(fù)合選項(xiàng)”，而對后面的setOption只使用“原子選項(xiàng)”，也就是說，只使用setOption更改baseOption。

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

現(xiàn)在支持三個(gè)屬性：width、height和aspectRatio。每個(gè)屬性的前綴都可以是min或max。例如，minWidth:200表示“大于或等于200px寬度”。這兩個(gè)屬性寫在一起表示“和”。例如，｛minWidth:200，maxHeight:300｝表示“寬度大于或等于200px，高度小于或等于300px”。 選項(xiàng)： 由于媒體中的選項(xiàng)是原子選項(xiàng)，理論上，可以編寫任何選項(xiàng)配置項(xiàng)。但通常情況下，我們只寫布局定位，例如攔截上面示例中的一些查詢選項(xiàng)：

option = {
    // 這里是基本的『原子option』。
    title: {...},
    legend: {...},
    series: [{...}, {...}, ...],
    ...,
    media: [ //
        {
            query: {...},   // 這里寫規(guī)則。
            option: {       // 這里寫此規(guī)則滿足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二個(gè)規(guī)則。
            option: {       // 第二個(gè)規(guī)則對應(yīng)的option。
                legend: {...},
                ...
            }
        },
        {                   // 
            option: {       // 
                legend: {...},
                ...
            }
        }
    ]
};

這里定義了 media query 的逐條規(guī)則。這條里沒有寫規(guī)則，表示『默認(rèn)』，即所有規(guī)則都不滿足時(shí)，采納這個(gè)option。

數(shù)據(jù)和維度

ECharts中的數(shù)據(jù)通常存儲在系列數(shù)據(jù)中。根據(jù)圖表的類型，數(shù)據(jù)的具體形式可能略有不同。例如，它可以是線性表、樹或圖形。但它們都有一個(gè)共同點(diǎn)：它們是“數(shù)據(jù)項(xiàng)”的集合。每個(gè)數(shù)據(jù)項(xiàng)包含“值”和其他信息（如有必要）。每個(gè)數(shù)據(jù)值可以是單個(gè)數(shù)值（一維）或數(shù)組（多維）。 例如，series最常見的數(shù)據(jù)形式是“線性表”，即常見的數(shù)組： 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem），這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）

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

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

分段視覺映射組件

分段視覺映射組件（visualMapPiecewise）有三種模式： 連續(xù)數(shù)據(jù)的平均分割：根據(jù)visualMap Peerswise SplitNumber自動(dòng)平均分割成幾個(gè)塊。 連續(xù)數(shù)據(jù)的自定義分割：根據(jù)visualMap Piecewise Pieces定義每個(gè)塊的范圍。 離散數(shù)據(jù)（分類數(shù)據(jù)）：類別在visualMap pricewise Categories中定義。 可視化映射模式的配置 由于這是“數(shù)據(jù)”到“視覺元素”的映射，因此可以在visualMap中指定數(shù)據(jù)的“哪個(gè)維度”（參見visualMap.dimension），以映射到哪個(gè)“視覺元素“（參見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 的第四個(gè)維度（即 value[3]）被映射，series.data 的第四個(gè)維度（即 value[3]）被映射。

事件和行為

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

在ECharts中，事件可以分為兩種類型：一種是用戶用鼠標(biāo)單擊時(shí)觸發(fā)的事件，或者是懸停圖表的圖形；另一種是用戶使用可以交互的組件后觸發(fā)的行為事件，例如切換圖例開關(guān)時(shí)觸發(fā)的“legendseletchanged”事件（請注意，切換圖例開關(guān)不會(huì)觸發(fā)“legendselect tchchanged”事件），縮放數(shù)據(jù)區(qū)域時(shí)觸發(fā)的”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 {
            }
        }
    }
});

點(diǎn)擊到了 markPoint 上，點(diǎn)擊到了 index 為 5 的 series 的 markPoint 上。點(diǎn)擊到了 graph 的 edge（邊）上。點(diǎn)擊到了 graph 的 node（節(jié)點(diǎn)）上。在ECharts中，幾乎所有的組件交互都會(huì)觸發(fā)相應(yīng)的事件。事件文檔中列出了常見事件和事件對應(yīng)參數(shù)。

以上就是ECharts框架分段視覺映射在移動(dòng)端適配的詳細(xì)內(nèi)容，更多關(guān)于ECharts分段視覺映射的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論