解决百度展示图表坐标轴越界的方法

展示是由百度提供的数据可视化解决方案，可以让我们快速实现功能丰富的图表，官网链接

使用方法

1.引入echart。量滴射流研究…文件

下载echart。量滴射流研究…文件，下载地址

创建一个挂载节点

将数据展示到挂载节点

生成数据，并将数据导入到选择权配置对象中

//创建数据定义变量基数=新日期(1968,9,3);var OneDay=24 * 3600 * 1000 var date=[]；定义变量数据=[数学。random()* 300]；for(var I=1；i 20000I){ var now=new Date(base=一天)；date.push([now.getFullYear()、now.getMonth() 1、now.getDate()].join('/')；数据。推(数学。圆((数学。random()-0.5)* 20数据[I-1])；} //创建对象option option={ tooltip : { trigger : ' axis '，position : function(pt){ return[pt[0]，' 10% ' }；} }，title: { left: 'center '，text: '大数据量面积图，}，工具箱： {功能： { datazoom : { yaxin index : ' none ' }，还原re : {类型： } }，xAxis: {类型： '类别'，boundaryGap: false，data: date }，yAxis: {类型： '值'，boundaryGap: [0，' 100 '系列： [ { name: '模拟数据，键入：'line '，smooth:true，symbol: 'none '，sampling: 'average '，items tyle : { color : ' RGB(255，70，131)' }，ares tyle : { color : new echart。梯度。线条渐变(0，0，0，1，[{ offset:color : ' RGB(255，1将选择权添加到挂载节点

//将选择权数据挂载到主要的节点echart。init(文档。getelementbyid(' main ').设置选项(选项)；

如何防止坐标轴越界

上方图表如果展示到移动版，坐标轴可能部分无法显示

解决方法很简单，只需在选择权中加一个配置项即可

网格： { contain label : true }(9504 . 163.com)

源码：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scalable=no，初始比例=1.0,最大比例=1.0,最小比例=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title echart-Demo/title script src=' http 3360 ./echart。量滴js '/script/head body div id=' main ' style=' width :100 "；高度：400 px/div脚本/创建数据定义变量基数=新日期(1968,9,3);var OneDay=24 * 3600 * 1000 var date=[]；定义变量数据=[数学。random()* 300]；for(var I=1；i 20000I){ var now=new Date(base=一天)；date.push([now.getFullYear()、now.getMonth() 1、now.getDate()].join('/')；数据。推(数学。圆((数学。random()-0.5)* 20数据[I-1])；} //创建对象option option={ tooltip : { trigger : ' axis '，position : function(pt){ return[pt[0]，' 10% ' }；} }，title: { left: 'center '，text: '大数据量面积图，}，工具箱： {功能： { datazoom : { yaxin index : ' none ' }，还原re : {类型： } }，xAxis: {类型： '类别'，boundaryGap: false，data: date }，yAxis: {类型： '值'，boundaryGap: [0，' 100 '系列： [ { name: '模拟数据，键入：'line '，smooth:true，symbol: 'none '，sampling: 'average '，items tyle : { color : ' RGB(255，70，131)' }，ares tyle : { color : new echart。梯度。linegradient(0，0，0，1，[{ offset:color : ' RGB(255，1 //将选择权数据挂载到主要的节点echart。init(文档。getelementbyid(' main ').设置选项(选项)；/脚本/正文/html小结：

上面实例有一个在线的版本，http://echarts.baidu.com/examples/editor.html？c=面积-简单，感兴趣可以打开网页，体会一下各种配置项的用途

博主开始没有找到正确的解决方法，导致走了弯路，最后发现添加一个参数就能顺利解决，这里分享给大家，希望沉迷开发的小伙伴，能少走弯路

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。