AV狼论坛一区二区无码,久久久久久久久1,精品日韩制服无码久久久久久

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)ECharts教程：ECharts實現(xiàn)移動端自適應(yīng)

用戶使用 Echarts 工作的時候所需要用到的組件和系列都在指定高寬的 DOM 節(jié)點（容器）中，其中每個節(jié)點都可以由用戶指定位置。

在林甸等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都網(wǎng)站設(shè)計網(wǎng)站設(shè)計制作按需網(wǎng)站策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),林甸網(wǎng)站建設(shè)費用合理。

Echarts 圖表庫內(nèi)部采用的是類似于絕對布局的易于理解的布局方式，因為實現(xiàn) DOM 文檔流布局是不合適的。但是圖表庫所采用的布局方式會受到容器尺寸的影響，出現(xiàn)組件重疊的情況。這就帶來了一個問題：如果圖表需要同時在 PC端和移動端展示，該怎么解決內(nèi)部組件的布局？

上述問題需要 Echarts 內(nèi)部組件能夠自動地隨著容器尺寸的改變而進行調(diào)整的能力。為了解決這個問題，ECharts 完善了組件的定位設(shè)置，并且實現(xiàn)了類似 CSS Media Query 的自適應(yīng)能力。

ECharts 組件的定位和布局

Echarts 中大部分組件和系列會遵循兩種定位方式：

left/right/top/bottom/width/height 定位方式
center / radius 定位方式

left/right/top/bottom/width/height 定位方式

該定位方式中的六個量，每個量都可以當做 絕對值、百分比 或者 位置描述：

絕對值的單位是瀏覽器像素（px），用 number 形式書寫（不寫單位）。例如 {left: 23, height: 400}。
百分比表示占 DOM 容器高寬的百分之多少，用 string 形式書寫。例如 {right: '30%', bottom: '40%'}。
位置描述可以設(shè)置 left: 'center'，表示水平居中?？梢栽O(shè)置 top: 'middle'，表示垂直居中。

這六個量的概念，和 CSS 中六個量的概念類似：

left：表示距離 DOM 容器左邊界的距離。
right：表示距離 DOM 容器右邊界的距離。
top：表示距離 DOM 容器上邊界的距離。
bottom：表示距離 DOM 容器下邊界的距離。
width：表示寬度。
height：表示高度。

小提示：

在表示橫向的量的時候，由于組件的位置和大小可以由任意的兩個量決定，所以在 left、right、width 三個量中，可以只提供兩個量的值。至于取哪兩個量的值就取決于用戶，例如 left 和 right 或者 right 和 width 都可以決定組件的位置和大小。

同理，在表示縱向的量 top、bottom、height 時，取值與橫向量相同。

center / radius 定位方式

center 是一個數(shù)組，表示 [x, y]，其中，x、y 可以是絕對值或者百分比，含義與前面描述的相同。
radius 是一個數(shù)組，表示 [內(nèi)半徑, 外半徑]，其中，內(nèi)外半徑可以是絕對值或者百分比，含義與前面描述的相同。

注意：在自適應(yīng)容器大小時，百分比設(shè)置是很有用的。

橫向（horizontal）和縱向（vertical）

ECharts 中像 legend、visualMap、dataZoom、timeline等狹長型的組件，大部分都有橫向布局和縱向布局這兩種選擇。例如，在寬少長多的移動端屏幕上，使用縱向布局更為合適；而在屏幕較寬的 PC 端上，則要選擇使用橫向布局。

橫縱向布局的設(shè)置：

一般在組件或者系列的 orient 或者 layout 配置項上，設(shè)置為 'horizontal' 或者 'vertical'。

與 ECharts2 的兼容性：

ECharts2 中可以使用如 x/x2/y/y2 的命名方式，分別對應(yīng) left/right/top/bottom。但是寫成 left/right/top/bottom 會更為規(guī)范。

為了兼容 ECharts2，在描述位置的時候可以支持一些看起來略奇怪的設(shè)置，例如：left: 'right'、left: 'left'、top: 'bottom'、top: 'top'。這些語句分別等效于：right: 0、left: 0、bottom: 0、top: 0，寫成后者就不奇怪了。

Media Query

Media Query 提供了隨著容器尺寸改變而改變的能力。

下面的例子，可以拖動右下角的圓點改變尺寸，隨著尺寸變化，legend 和系列會自動改變布局位置和方式：

點擊編輯實例》》

在 option 中設(shè)置 Media Query 需要遵循下面的格式：

option = {
    baseOption: { // 這里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 這里定義了 media query 的逐條規(guī)則。
        {
            query: {...},   // 這里寫規(guī)則。
            option: {       // 這里寫此規(guī)則滿足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二個規(guī)則。
            option: {       // 第二個規(guī)則對應(yīng)的option。
                legend: {...},
                ...
            }
        },
        {                   // 這條里沒有寫規(guī)則，表示『默認』，
            option: {       // 即所有規(guī)則都不滿足時，采納這個option。
                legend: {...},
                ...
            }
        }
    ]
};

上述例子中的 baseOption、以及 media 每個 option 都是原子 option，即普通的含有各組件、系列定義的 option。而由原子option組合成的整個 option，我們稱為復(fù)合 option。baseOption 是必然被使用的，此外，滿足了某個 query 條件時，對應(yīng)的 option 會被使用 chart.mergeOption() 來 merge 進去。

query：

每個 query 可以寫成下述形式：

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

目前 query 支持三個屬性：width、height、aspectRatio（長寬比）。每個屬性都可以加上 min 或 max 前綴。比如，minWidth: 200 表示 大于等于200px寬度 。兩個屬性一起寫表示且，例如：{minWidth: 200, maxHeight: 300} 表示 大于等于200px寬度，且小于等于300px高度 。

option：

media 中的 option 既然是 原子 option ，理論上可以寫任何 option 的配置項。但是一般我們只寫跟布局定位相關(guān)的，例如截取上面例子中的一部分 query option：

media: [
    ...,
    {
        query: {
            maxAspectRatio: 1           // 當長寬比小于1時。
        },
        option: {
            legend: {                   // legend 放在底部中間。
                right: 'center',
                bottom: 0,
                orient: 'horizontal'    // legend 橫向布局。
            },
            series: [                   // 兩個餅圖左右布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '70%']
                }
            ]
        }
    },
    {
        query: {
            maxWidth: 500               // 當容器寬度小于 500 時。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右側(cè)中間。
                top: '15%',
                orient: 'vertical'      // 縱向布局。
            },
            series: [                   // 兩個餅圖上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

具有多個 query 時的優(yōu)先級：

注意，可以有多個 query 同時被滿足，會都被 mergeOption，定義在后的后被 merge（即優(yōu)先級更高）。

默認 query：

如果 media 中有某項不寫 query，則表示『默認值』，即所有規(guī)則都不滿足時，采納這個option。

容器大小實時變化時的注意事項：

如果容器DOM節(jié)點需要能任意隨著拖拽變化大小，那么目前使用時需要注意這件事：某個配置項，如果在某一個 query option 中出現(xiàn)，那么在其他 query option 中也必須出現(xiàn)，這樣才能夠回歸到原來的狀態(tài)。（left/right/top/bottom/width/height 不受這個限制。）

復(fù)合 option 中的 media 不支持 merge

也就是說，當?shù)诙ɑ蛉?、四、?...）次 chart.setOption(rawOption) 時，如果 rawOption 是 復(fù)合 option（即包含 media 列表），那么新的 rawOption.media 列表不會和老的 media 列表進行 merge，而是簡單替代。當然，rawOption.baseOption 仍然會正常和老的 option 進行merge。

其實，很少有場景需要使用 復(fù)合 option 來多次 setOption，而我們推薦的做法是，使用 mediaQuery 時，第一次 setOption 使用 復(fù)合 option ，后面 setOption 時僅使用 原子 option，也就是僅僅用 setOption 來改變 baseOption。

最后看一個和時間軸結(jié)合的例子：