解决百度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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
JavaScript 学习技巧
Feb 17 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
js简单实现交换Li的值
May 22 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
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数组去除空值函数分享
2015/02/02 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
轮播的简单实现方法
2016/07/28 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Windows下安装Scrapy
2018/10/17 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
django 类视图的使用方法详解
2019/07/24 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
甜美蛋糕店创业计划书
2014/01/30 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
师范大学生求职信
2014/06/13 职场文书
竞选学委演讲稿
2014/09/13 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android