解决百度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实现在光标位置插入内容的方法
Feb 05 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
JS图片预加载三种实现方法解析
May 08 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
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP中串行化用法示例
2016/11/16 PHP
详解php用static方法的原因
2018/09/12 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python 控制语句
2011/11/03 Python
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
枚举与#define宏的区别
2014/04/30 面试题
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
自我鉴定三原则
2014/01/13 职场文书
研发工程师岗位职责
2014/04/28 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
行政二审代理词
2015/05/25 职场文书
企业财务管理制度范本
2015/08/04 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL