jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】


Posted in Javascript onMarch 04, 2017

本文实例讲述了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果。分享给大家供大家参考,具体如下:

1、问题背景:

如何在echarts中,去掉X轴、Y轴和网格线,只留数据图形

2、实现源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-去掉X轴、Y轴和网格线</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="echarts.js" ></script>
    <script>
      $(function(){
        function randomDataArray() {
          var d = [];
          var arr = [3,5,7,9,10,1,2,4,8,6];
          var len = 10;
          for(var i=0;i<len;i++)
          {
            d.push([i+1,0,arr[i],]);
          }
          return d;
        }
        var chart = document.getElementById('chart');
        var echart = echarts.init(chart);
        var option = {
          legend: {
            data:['scatter1'],
            show:false
          },
          textStyle:{
            fontSize:16
          },
          xAxis : [
            {
              type : 'value',
              splitNumber: 2,
              scale: true,
              show:false,
              splitLine:{
            
show:false
            
}
            }
          ],
          yAxis : [
            {
              type : 'value',
              splitNumber: 2,
              scale: true,
              show:false,
              splitLine:{
            

show:false
            
 }
            }
          ],
          series : [
            {
              name:'scatter1',
              type:'scatter',
              symbol: 'emptyCircle',
              symbolSize: 20,
              itemStyle : {
                normal: {
                  label:{
                    show: true,
                    position: 'inside',
                    textStyle : {
                      fontSize : 24,
                      fontFamily : '微软雅黑',
                      color:'#FF0000'
                    }
                  }
                }
              },
              data: randomDataArray()
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="chart" style="width: 1200px; height: 220px;"></div>
  </body>
</html>

3、实现效果图:

jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 #Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 #Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 #Javascript
简单实现js菜单栏切换效果
Mar 04 #Javascript
浅谈javascript的url参数parse和build函数
Mar 04 #Javascript
js css3实现图片拖拽效果
Mar 04 #Javascript
You might like
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php 保留字列表
2012/10/04 PHP
PHP7 其他修改
2021/03/09 PHP
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
Python魔术方法详解
2015/02/14 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python Celery多队列配置代码实例
2019/11/22 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
职业生涯规划书基本格式
2014/01/06 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
会议主持词
2014/03/17 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
文化苦旅读书笔记
2015/06/29 职场文书