首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

解决百度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, 感兴趣可以打开网页, 体会一下各种配置项的用途

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

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

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

- Author -

木子昭

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
node.js 动态执行脚本
Jun 02 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
uniapp(4) self(1) capture(1) element-china-area-data(1) css3 (2) Normal From(1) MybatisPlus(2) SpringBoot(22) JSON(10) tabBar(1)
You might like
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php验证码生成代码
2015/11/11 PHP
php5与php7的区别点总结
2019/10/11 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
中学生团员自我评价分享
2013/12/07 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android