解决百度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实现tab标签浏览效果
Feb 20 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
JavaScript多种页面刷新方法小结
Apr 04 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 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
You might like
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php分页函数完整实例代码
2014/09/22 PHP
php学习笔记之面向对象
2014/11/08 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
如何编写jquery插件
2017/03/29 jQuery
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
大学老师推荐信
2014/02/25 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL