ECharts.js 移動端顯示
如今不少時候，咱們是在用手機、pad等一些移動端設備來進行辦公獲取數據。因此咱們的圖表不少時候是須要用移動端設置來查看的，而咱們的圖表有時候由於數據的偏多，會出現遮擋和重疊的狀況。這個時候就須要對移動端的圖標顯示作一些優化，ECharts對於移動端的優化和支持主要有2個方面。javascript
1、ECharts組件的定位和佈局
組件的定位官方描寫的比較詳細也比較全，個人簡單理解爲，ECharts.js對於圖表裏面每一個組件和工具都採用了兩種尺寸單位和設置固定位置。java
一種是比較直接的 像素（px），設置的時間直接以 number 形式填寫。好比android
title:{
text:'ECharts 數據統計',
top:20
}
這裏就是設置標題組件的距離上面的高度是20px。ios
還有一種是安裝百分比（%）的形式來設置的，百分比值是 string 類型，須要加上引號。好比web
legend:{
data:['訪問量','用戶量'],
left:'50%'
}
這裏標識legend組件的位置距離左側的距離是整個圖表的50%寬度瀏覽器
另外能夠經過固定的值來設置所在位置，好比：app
- 能夠設置
left: 'center'，表示水平居中。 - 能夠設置
top: 'middle'，表示垂直居中。
另外針對不一樣類型的圖標還有不一樣的定位方式。echarts
佈局這塊能夠簡單歸結爲兩種，一種是 橫向（horizontal）顯示，一種是 縱向（vertical）顯示。ide
2、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 進去。
baseOptionmediabaseOptionquerychart.mergeOption()多個 query 被知足時的優先級：
注意，能夠有多個 query 同時被知足，會都被 mergeOption，定義在後的後被 merge（即優先級更高）。
默認 query：
若是 media 中有某項不寫 query，則表示『默認值』，即全部規則都不知足時，採納這個option。
容器大小實時變化時的注意事項：
在很多狀況下，並不須要容器DOM節點任意隨着拖拽變化大小，而是隻是根據不一樣終端設置幾個典型尺寸。
可是若是容器DOM節點須要能任意隨着拖拽變化大小，那麼目前使用時須要注意這件事：某個配置項，若是在某一個 query option中出現，那麼在其餘 query option 中也必須出現，不然不可以迴歸到原來的狀態。（left/right/top/bottom/width/height 不受這個限制。）
『複合 option』 中的 media 不支持 merge
也就是說，當第二（或3、4、五 ...）次 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);
}
相關文章
- 1. 學習EChart.js（四） 移動端顯示
- 2. EChart在移動端顯示加這個就行
- 3. 移動端下網頁border：1px顯示
- 4. 移動端強制橫屏顯示
- 5. ECHarts.js
- 6. ECharts.js
- 7. vue寫的PC端表格，如何在移動端顯示？
- 8. PC端table表在移動端怎麼顯示比較好
- 9. 將pc端的網頁自適應顯示在移動端
- 10. 移動端瀏覽器不顯示滾動條解決方案
- 更多相關文章...
- • ADO 顯示 - ADO 教程
- • Thymeleaf顯示Bean的值 - Thymeleaf 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 學習EChart.js（四） 移動端顯示
- 2. EChart在移動端顯示加這個就行
- 3. 移動端下網頁border：1px顯示
- 4. 移動端強制橫屏顯示
- 5. ECHarts.js
- 6. ECharts.js
- 7. vue寫的PC端表格，如何在移動端顯示？
- 8. PC端table表在移動端怎麼顯示比較好
- 9. 將pc端的網頁自適應顯示在移動端
- 10. 移動端瀏覽器不顯示滾動條解決方案