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


Posted in Javascript onOctober 17, 2018

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

使用方法

1.引入echarts.min.js文件

下载echarts.min.js文件,下载地址

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

创建一个挂载节点

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

将数据展示到挂载节点

生成数据, 并将数据导入到option配置对象中

// 创建数据
    var base = +new Date(1968, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var date = [];

    var data = [Math.random() * 300];

    for (var i = 1; i < 20000; i++) {
      var now = new Date(base += oneDay);
      date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }
    
    // 创建对象option
    option = {
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },
      title: {
        left: 'center',
        text: '大数据量面积图',
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
      }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }],
      series: [
        {
          name:'模拟数据',
          type:'line',
          smooth:true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: 'rgb(255, 70, 131)'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(255, 158, 68)'
            }, {
              offset: 1,
              color: 'rgb(255, 70, 131)'
            }])
          },
          data: data
        }
      ]
    };

将option添加到挂载节点

// 将option数据挂载到main节点
echarts.init(document.getElementById('main')).setOption(option);

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

如何防止坐标轴越界

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

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

解决方法很简单,只需在option中加一个配置项即可

grid:{
    containLabel: true
   },

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

源码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Echarts-Demo</title>
  <script src="./echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width:100%;height:400px;"></div>
  <script>
    // 创建数据
    var base = +new Date(1968, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var date = [];

    var data = [Math.random() * 300];

    for (var i = 1; i < 20000; i++) {
      var now = new Date(base += oneDay);
      date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }

    // 创建对象option
    option = {
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },
      title: {
        left: 'center',
        text: '大数据量面积图',
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
      }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }],
      series: [
        {
          name:'模拟数据',
          type:'line',
          smooth:true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: 'rgb(255, 70, 131)'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(255, 158, 68)'
            }, {
              offset: 1,
              color: 'rgb(255, 70, 131)'
            }])
          },
          data: data
        }
      ],
      grid:{
        containLabel: true
      }
    };
    // 将option数据挂载到main节点
    echarts.init(document.getElementById('main')).setOption(option);

  </script>
</body>
</html>

小结:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript的原型继承
Jul 25 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
js实现网页抽奖实例
Aug 05 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
You might like
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Vue.js划分组件的方法
2017/10/29 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python处理按钮消息的实例详解
2017/07/11 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
用python实现一个简单的验证码
2020/12/09 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
开学典礼演讲稿
2014/05/23 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
电话客服工作职责
2014/07/27 职场文书
怒海潜将观后感
2015/06/11 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers