解决百度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 相关文章推荐
基于jQuery选择器的整理集合
Apr 26 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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/03/17 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
详解json在php中的应用
2018/09/30 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
wxPython中listbox用法实例详解
2015/06/01 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python和shell获取文本内容的方法
2018/06/05 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
什么是servlet链?
2014/07/13 面试题
Ruby如何进行文件操作
2014/07/17 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
行政复议决定书
2015/06/24 职场文书
学生会主席任命书
2015/09/21 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python