Learning Echart.js (iv) mobile display

Echarts.js Mobile Side Display

Most of the time, we are using mobile phone, pad and other mobile devices to obtain data from the office. So our charts often need to be viewed with the mobile settings, and our charts are sometimes obscured and overlapping because of the amount of data. This time you need to do some optimization on the mobile side of the icon display, echarts on the mobile side of the optimization and support there are 2 main aspects.

I. Positioning and layout of echarts components

Component positioning the official description of the comparison is more detailed, my simple understanding, echarts.js for each of the components and tools in the chart are used in two dimensions and set the fixed position.

One is a more direct pixel (px), and the set time is directly filled in number form. Like what

title:{    text: ' Echarts data statistics ',    top:20}

This is where the height of the header component is set to 20px.

There is also an installation percentage (%) in the form of set, percent value is string type, need to enclose quotation marks. Like what

legend:{    data:[' traffic ', ' user volume ', left    : ' 50% '}

The distance from the left side of the location that identifies the legend component is 50% width of the entire chart

You can also set your location by a fixed value, such as:

• Can be set left: ‘center‘ to indicate horizontal centering.
• Can be set top: ‘middle‘ to indicate vertical centering.

In addition, there are different positioning methods for different types of icons.

The layout of this piece can be summed up in two simple, one is the horizontal (horizontal) display, one is the portrait (vertical) display.

Second, Echarts Adaptive ability Media Query

Media Query provides the ability to "change as the size of the container changes."

option = {    baseoption: {//Here is the basic "atomic option".        title: {...},        legend: {...},        series: [{...}, {...], ...},    Media: [//This defines the media query's Rule by clause.        {            query: {...},   //write the rules here.            option: {       //write here This rule satisfies under option.                legend: {...}},        {            query: {...},   //second rule.            option: {       //option for the second rule.                legend: {...            }        },        {                   //There is no write rule in this article, meaning "default",            option: {       //i.e. all rules are not satisfied, Adopt this option.                legend: {...}    ]};

 
 in the example above,  baseoption , and    Media    Each option is "atomic option", which is an option that contains the definitions of each component and series. The entire option, which is composed of "Atom option", is called "compound option".  baseoption    is bound to be used, in addition to a    query    condition, the corresponding option will be used    Chart.mergeoption ()    to merge in. 
                 /span>          

Priority when multiple query is satisfied:

Note that there can be multiple query simultaneous gratification, which will be mergeOption defined after the merge (i.e. higher priority).

Default query:

If an media item is not written query , it means "default", that is, when all rules are not satisfied, this option is adopted.

Considerations when container size changes in real time:

In many cases, it is not necessary for the container DOM node to be arbitrarily sized with the drag and drop, but only a few typical sizes based on the different terminals.

However, if the container DOM node needs to be able to arbitrarily drag and drop the size, then the current use should pay attention to this matter: a configuration item, if it appears in one query option , then must appear in the other query option , or not enough to return to the original state. ( left/right/top/bottom/width/height not subject to this limitation.) ）

mediamerge is not supported in compound option

In other words, when the second (or three, four or five ... ), the chart.setOption(rawOption) rawOption 复合option media new rawOption.media list does not merge with the old list, but is a media simple alternative. Of course, the rawOption.baseOption merge will still be normal and old option.

In fact, few scenes need to use "compound option" many times setOption , and we recommend that when using Mediaquery, the first time setoption use "compound option", setOption only use "Atomic option" later, that is, just use SetOption to change baseOption .

The above is provided by Echart on the mobile small screen adaptive method, I also provide a way to identify the browser information through JS, and then based on the information obtained, set the size of the chart container, and then combined with Echart Media query better display the chart to detect whether the mobile side of JS

var ismobile = false;            var browser = {Versions:function () {var u = navigator.useragent, app = Navigator.appversion;  return {trident:u.indexof (' Trident ') >-1,//ie kernel presto:u.indexof (' presto ') >  -1,//opera kernel webkit:u.indexof (' AppleWebKit ') >-1,//Apple, Google kernel gecko:u.indexof (' Gecko ') >-1 && u.indexof (' khtml ') = =-1,//Firefox core mobile:!! U.match (/applewebkit.*mobile.*/) | | !! U.match (/applewebkit/),//Whether for Mobile terminal iOS:!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/),//ios terminal Android:u.indexof (' Android ') >-1 | | U.indexof (' Linux ') >-1,//android terminal or UC Browser iphone:u.indexof (' IPhone ') >-1 | | U.indexof (' Mac ') >-1,//whether for iphone or Qqhd browser ipad:u.indexof (' ipad ') >-1,//whether IPAD Web         App:u.indexof (' Safari ') = =-1//whether the Web should be program, no head with bottom}; } (), Language: (navigator.brOwserlanguage | | navigator.language). toLowerCase ()} ismobile = Browser.versions.mobile;

这段代码能够识别大部分的移动端设备的浏览器信息，对于一些特殊的浏览器可能会存在缺陷Set the size of the chart container according to the browser size

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%");}      }

Set chart parameters in conjunction with Echart Media Query

function init () {///discounted report implementation code var MyChart = echarts.init (document.getElementById (' Chartmain '));            option = {baseoption:{title: {text: ' Dairy cow digital Farming report ', Subtext: ' Western Electronic data collection ' }, tooltip: {trigger: ' Axis '}, Legend: {data:                    [' Daily feeding amount ', ' Milk Yield '}, Toolbox: {show:true, feature: { Mark: {show:true}, DataView: {show:true, Readonly:false}, Magictype: {Show : True, type: [' line ', ' Bar ', ' stack ', ' tiled '}, restore: {show:true}, Saveasimag                    E: {show:true}}, Calculable:true, Xaxis: [{ Type: ' Category ', Boundarygap:false, data: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday ']}, YAxis: [{type: ' value '}], series                    : [{name: ' Daily feed Amount ', type: ' line ', Smooth:true, ItemStyle: {normal: {areastyle: {type: ' Default '}}}, data:[100, 200, 150, 130, 260, 830                    , 710]}, {name: ' Milk yield ', type: ' line ', Smooth:true, ItemStyle: {normal: {areastyle: {type: ' Default '}}, Data:[30, 182, 2                156, 390, 356]}, media:[//media start {                        query:{}, option:{title: {text: ' Dairy cow digital farming report ', Subtext: ' Western Electronic Data Collection '}, tooltip: {trigger: ' axis ‘ },                   Legend: {data:[' daily feeding amount ', ' Milk Yield '}, Toolbox:                            {show:true, feature: {mark: {show:true}, DataView: {show:true, Readonly:false}, Magictype: {show:true, T ype: [' line ', ' Bar ', ' stack ', ' tiled '}, restore: {show:true}, Sav                    Easimage: {show:true}}}, Calculable:true, Xaxis: [{type: ' Category ', boundary                    Gap:false, data: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday '}                        ], YAxis: [{type: ' value '                 }   ], series: [{name: ' Daily feed amount ', Type: ' line ', Smooth:true, ItemStyle: {normal: {areastyle: {ty                        PE: ' Default '}}, data:[100, 200, 150, 130, 260, 830, 710]}, {name: ' Milk yield ', type: ' line ', s Mooth:true, ItemStyle: {normal: {areastyle: {type: ' Default '}}}, dat            a:[30, 182, 216, 156, 390, 300, 356]}}},                        {query:{maxwidth:400,ismobile:true}, option:{title: {  Text: ' Dairy cow digital Farming report ', Subtext: ' Western Electronic Data Collection '}, tooltip:                      {  Trigger: ' Axis '}, Legend: {data:[' daily feed ', ' milk production '],                    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, dat A: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday ']}], YAxis: [{                        Type: ' value '}], series: [                            {name: ' Daily Feed ', type: ' line ',                            Smooth:true, ItemStyle: {normal: {areastyle: {type: ' Default '}}}, DATA:[100, 260, 830, 710]}, {n Ame: ' Milk yield ', type: ' line ', Smooth:true, item                        Style: {normal: {areastyle: {type: ' Default '}}}, data:[30, 182, 216, 156, 390, 300, 356]                                         }]}} (//media)}; mychart.setoption (option);} 

Effect Show

Transferred from: http://www.cnblogs.com/leoxuan/p/6544351.html

Learning Echart.js (iv) mobile display