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. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 学习EChart.js（四） 移动端显示
- 2. EChart在移动端显示加这个就行
- 3. 移动端下网页border：1px显示
- 4. 移动端强制横屏显示
- 5. ECHarts.js
- 6. ECharts.js
- 7. vue写的PC端表格，如何在移动端显示？
- 8. PC端table表在移动端怎么显示比较好
- 9. 将pc端的网页自适应显示在移动端
- 10. 移动端浏览器不显示滚动条解决方案