移動端適配

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

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

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

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

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

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

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

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

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

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

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

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

分段視覺映射組件

分段視覺映射組件（visualMapPiecewise）有三種模式： 連續(xù)數(shù)據(jù)的平均分割：根據(jù)visualMap Peerswise SplitNumber自動平均分割成幾個塊。 連續(xù)數(shù)據(jù)的自定義分割：根據(jù)visualMap Piecewise Pieces定義每個塊的范圍。 離散數(shù)據(jù)（分類數(shù)據(jù)）：類別在visualMap pricewise Categories中定義。 可視化映射模式的配置 由于這是“數(shù)據(jù)”到“視覺元素”的映射，因此可以在visualMap中指定數(shù)據(jù)的“哪個維度”（參見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中，事件可以分為兩種類型：一種是用戶用鼠標單擊時觸發(fā)的事件，或者是懸停圖表的圖形；另一種是用戶使用可以交互的組件后觸發(fā)的行為事件，例如切換圖例開關(guān)時觸發(fā)的“legendseletchanged”事件（請注意，切換圖例開關(guān)不會觸發(fā)“legendselect tchchanged”事件），縮放數(shù)據(jù)區(qū)域時觸發(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 {
            }
        }
    }
});

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

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

最新評論