首页
所有分类
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 相关文章推荐
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
小程序click-scroll组件设计
Jun 18 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
SLi Minor 2020(63) 中国购物网站(172) 英国购物网站(954) 加拿大购物网站(185) 巴西购物网站(71) 新加坡购物网站(41) 爱尔兰购物网站(30) 美国购物网站(1542) 天梯图(1) 香港购物网站(84)
You might like
php创建sprite
2014/02/11 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
JS实现随机抽选获奖者
2019/11/07 Javascript
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
写求职信要注意什么问题
2014/04/12 职场文书
广告宣传策划方案
2014/05/21 职场文书
真诚的求职信
2014/07/04 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015年教研工作总结
2015/05/23 职场文书
货款欠条范本
2015/07/03 职场文书
2019年工作总结范文
2019/05/21 职场文书
2019通用版劳动合同范本！
2019/07/11 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript