学习EChart.js（四） 移动端显示

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, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                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);
}

 效果展示