學習EChart.js（四） 移動端顯示

標籤：終端   擷取   html   indexof   方式   注意事項   amp   uc瀏覽器   blog   

ECharts.js 移動端顯示

現在很多時候，我們是在用手機、pad等一些移動端裝置來進行辦公擷取資料。所以我們的圖表很多時候是需要用移動端設定來查看的，而我們的圖表有時候因為資料的偏多，會出現遮擋和重疊的情況。這個時候就需要對移動端的表徵圖顯示做一些最佳化，ECharts對於移動端的最佳化和支援主要有2個方面。

一、ECharts組件的定位和布局

組件的定位官方描寫的比較詳細也比較全，我的簡單理解為，ECharts.js對於圖表裡面每個組件和工具都採用了兩種尺寸單位和設定固定位置。

一種是比較直接的 像素（px），設定的時間直接以 number 形式填寫。比如

title:{    text:‘ECharts 資料統計‘,    top:20}

 

這裡就是設定標題組件的距離上面的高度是20px。

還有一種是安裝百分比（%）的形式來設定的，百分比值是 string 類型，需要加上引號。比如

legend:{    data:[‘訪問量‘,‘使用者量‘],    left:‘50%‘}

 

這裡標識legend組件的位置距離左側的距離是整個圖表的50%寬度

另外可以通過固定的值來設定所在位置，比如：

• 可以設定 left: ‘center‘，表示水平置中。
• 可以設定 top: ‘middle‘，表示垂直置中。

另外針對不同類型的表徵圖還有不同的定位方式。

 

布局這塊可以簡單歸結為兩種，一種是 橫向（horizontal）顯示，一種是 縱向（vertical）顯示。

 

二、ECharts自適應能力Media Query

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

option = {    baseOption: { // 這裡是基本的『原子option』。        title: {...},        legend: {...},        series: [{...}, {...}, ...],        ...    },    media: [ // 這裡定義了 media query 的逐條規則。        {            query: {...},   // 這裡寫規則。            option: {       // 這裡寫此規則滿足下的option。                legend: {...},                ...            }        },        {            query: {...},   // 第二個規則。            option: {       // 第二個規則對應的option。                legend: {...},                ...            }        },        {                   // 這條裡沒有寫規則，表示『預設』，            option: {       // 即所有規則都不滿足時，採納這個option。                legend: {...},                ...            }        }    ]};

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

多個 query 被滿足時的優先順序：

注意，可以有多個 query 同時被滿足，會都被 mergeOption，定義在後的後被 merge（即優先順序更高）。

預設 query：

如果 media 中有某項不寫 query，則表示『預設值』，即所有規則都不滿足時，採納這個option。

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

在不少情況下，並不需要容器DOM節點任意隨著拖拽變化大小，而是只是根據不同終端設定幾個典型尺寸。

但是如果容器DOM節點需要能任意隨著拖拽變化大小，那麼目前使用時需要注意這件事：某個配置項，如果在某一個 query option中出現，那麼在其他 query option 中也必須出現，否則不能夠迴歸到原來的狀態。（left/right/top/bottom/width/height 不受這個限制。）

『複合 option』 中的 media 不支援 merge

也就是說，當第二（或三、四、五 ...）次 chart.setOption(rawOption) 時，如果 rawOption 是 複合option（即包含 media 列表），那麼新的 rawOption.media 列表不會和老的 media 列表進行 merge，而是簡單替代。當然，rawOption.baseOption 仍然會正常和老的 option 進行merge。

其實，很少有情境需要使用『複合 option』來多次 setOption，而我們推薦的做法是，使用 mediaQuery 時，第一次setOption使用『複合 option』，後面 setOption 時僅使用 『原子 option』，也就是僅僅用 setOption 來改變 baseOption。

 

以上是EChart提供的關於移動端小螢幕自適應的方法，我另外提供一種方式通過JS識別瀏覽器資訊，然後根據所得的資訊，設定圖表容器的尺寸，然後再結合EChart的media query更好的展示圖表檢測是否為移動端的JS

var ismobile = false;    var browser = {        versions: function () {            var u = navigator.userAgent, app = navigator.appVersion;            return {                trident: u.indexOf(‘Trident‘) > -1, //IE核心                presto: u.indexOf(‘Presto‘) > -1, //opera核心                webKit: u.indexOf(‘AppleWebKit‘) > -1, //蘋果、Google核心                gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //Firefox核心                mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為移動終端                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端                android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android終端或者uc瀏覽器                iPhone: u.indexOf(‘iPhone‘) > -1 || u.indexOf(‘Mac‘) > -1, //是否為iPhone或者QQHD瀏覽器                iPad: u.indexOf(‘iPad‘) > -1, //是否iPad                webApp: u.indexOf(‘Safari‘) == -1 //是否web應該程式，沒有頭部與底部            };         }(),         language: (navigator.browserLanguage || navigator.language).toLowerCase()     }          ismobile =   browser.versions.mobile;

這段代碼能夠識別大部分的移動端裝置的瀏覽器資訊，對於一些特殊的瀏覽器可能會存在缺陷根據瀏覽器尺寸，設定圖表容器的大小

if (browser.versions.mobile) {         window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);        $("#chartmain").height(pageheight*0.6);        $("#chartmain").width(pagewidth * 0.95);    }    else {        $("#chartmain").height("500px");        $("#chartmain").width("700px");    }function hengshuping(){    if(window.orientation==180||window.orientation==0){        $("#chartmain").height($(window).height()-20);        $("#chartmain").width("100%");    }    if(window.orientation==90||window.orientation==-90){        $("#chartmain").height($(window).height()-20);        $("#chartmain").width("100%");      }}

結合EChart的 Media Query 設定圖表參數

function init(){    ///折現報表實現代碼    var myChart = echarts.init(document.getElementById(‘chartmain‘));    option = {        baseOption:{            title : {                text: ‘奶牛數字化養殖報表‘,                subtext: ‘西部電子資料擷取‘            },            tooltip : {                trigger: ‘axis‘            },            legend: {                data:[‘每日飼餵量‘,‘產奶量‘]            },            toolbox: {                show : true,                feature : {                    mark : {show: true},                    dataView : {show: true, readOnly: false},                    magicType : {show: true, type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},                    restore : {show: true},                    saveAsImage : {show: true}                }            },            calculable : true,            xAxis : [                {                    type : ‘category‘,                    boundaryGap : false,                    data : [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]                }            ],            yAxis : [                {                    type : ‘value‘                }            ],            series : [                {                    name:‘每日飼餵量‘,                    type:‘line‘,                    smooth:true,                    itemStyle: {normal: {areaStyle: {type: ‘default‘}}},                    data:[100, 200, 150, 130, 260, 830, 710]                },                {                    name:‘產奶量‘,                    type:‘line‘,                    smooth:true,                    itemStyle: {normal: {areaStyle: {type: ‘default‘}}},                    data:[30, 182, 216, 156, 390, 300, 356]                }            ]        },        media:[            //media開始            {                query:{},                option:{                    title : {                        text: ‘奶牛數字化養殖報表‘,                        subtext: ‘西部電子資料擷取‘                    },                    tooltip : {                        trigger: ‘axis‘                    },                    legend: {                        data:[‘每日飼餵量‘,‘產奶量‘]                    },                    toolbox: {                        show : true,                        feature : {                            mark : {show: true},                            dataView : {show: true, readOnly: false},                            magicType : {show: true, type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},                            restore : {show: true},                            saveAsImage : {show: true}                        }                    },                    calculable : true,                    xAxis : [                        {                            type : ‘category‘,                            boundaryGap : false,                            data : [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]                        }                    ],                    yAxis : [                        {                            type : ‘value‘                        }                    ],                    series : [                        {                            name:‘每日飼餵量‘,                            type:‘line‘,                            smooth:true,                            itemStyle: {normal: {areaStyle: {type: ‘default‘}}},                            data:[100, 200, 150, 130, 260, 830, 710]                        },                        {                            name:‘產奶量‘,                            type:‘line‘,                            smooth:true,                            itemStyle: {normal: {areaStyle: {type: ‘default‘}}},                            data:[30, 182, 216, 156, 390, 300, 356]                        }                    ]                }            },            {                query:{maxWidth:400,ismobile:true},                option:{                    title : {                        text: ‘奶牛數字化養殖報表‘,                        subtext: ‘西部電子資料擷取‘                    },                    tooltip : {                        trigger: ‘axis‘                    },                    legend: {                        data:[‘每日飼餵量‘,‘產奶量‘],                        right: ‘center‘,                        bottom: 0,                        orient: ‘horizontal‘                    },                    toolbox: {                        show : true,                        orient:‘vertical‘,                        feature : {                            mark : {show: true},                            dataView : {show: true, readOnly: false},                            magicType : {show: true, type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},                            restore : {show: true},                            saveAsImage : {show: true}                        }                    },                    calculable : true,                    xAxis : [                        {                            type : ‘category‘,                            boundaryGap : false,                            data : [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]                        }                    ],                    yAxis : [                        {                            type : ‘value‘                        }                    ],                    series : [                        {                            name:‘每日飼餵量‘,                            type:‘line‘,                            smooth:true,                            itemStyle: {normal: {areaStyle: {type: ‘default‘}}},                            data:[100, 200, 150, 130, 260, 830, 710]                        },                        {                            name:‘產奶量‘,                            type:‘line‘,                            smooth:true,                            itemStyle: {normal: {areaStyle: {type: ‘default‘}}},                            data:[30, 182, 216, 156, 390, 300, 356]                        }                    ]                }            }            //media結束        ]    };                                          myChart.setOption(option);}

 效果展示

 

轉自：http://www.cnblogs.com/leoxuan/p/6544351.html

學習EChart.js（四） 移動端顯示