jQuery插件echarts实现的去掉X轴、Y轴和网格线效果的方法

  • 时间:
  • 4261人关注

这篇文章主要介绍了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果,结合实例形式分析了echarts插件绘制表格图及图形相关属性设置操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考,另外这篇文章主要知识点是关于jQuery、插件、echarts、X轴、Y轴、网格线、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:
  • 编辑整理:储睿聪
  • 教程字数:1192字节
  • 阅读时间:大概10分钟
  • 下载本教程(DOC版)
  • 《从0到1:jQuery快速上手》课件,源码,习题答案
  • Quick Javascript Switcher
  • SBIS Plugin Extension
  • 支付宝安全插件
  • Wordpress Admin Bar Control
  • 本文实例讲述了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" ></div>
      </body>
    </html>
    
    

    3、实现效果图:

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

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

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


    上一篇:easyui下拉框动态级联加载的实例内容

    下一篇:怎样处理jQuery EasyUI 已打开Tab重新加载问题

    相关内容

    • Pycharm 2021最新永久激活码(附最新激活码和插件)

      最近很多朋友的Pycharm激活时间又过期了,今天小编再把激活的方法汇总和工具分享一下,文中给大家分享两种方式,需要的朋友直接拿去用吧

      04-08Pycharm 2021永久激活教程

      阅读更多
    • 总结laypage.js分页插件用法

      这篇文章主要为大家详细介绍了laypage.js分页插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      02-20laypage.js分页插件使用方法详解

      阅读更多
    • 如何解决jquery的flexigrid无法显示数据提示获取到数据问题

      升级了IE10,发现flexigrid无法显示数据,提示获取到了数据,但没任何报错任何显示,经过试验和跟踪,修改如下,有类似问题的朋友可以参考下哈

      04-19jquery的flexigrid无法显示数据提示获取到数据

      阅读更多
    • Jquery瀑布流插件的技巧用法

      瀑布流布局在目前貌似很火爆,具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西

      01-23Jquery瀑布流插件使用介绍

      阅读更多
    • 实例分享提取jquery的ready()方法

      有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了

      02-26提取jquery的ready()方法单独使用示例

      阅读更多
    • Bootstrap与jQuery UI框架设计

      Bootstrap与jQuery UI框架设计

      随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

      大小:180 MBjQuery

      点击下载
    • jQuery EasyUI开发指南

      jQuery EasyUI开发指南

      使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

      大小:48.4 MBjQuery

      点击下载
    • jQuery实战案例精粹

      jQuery实战案例精粹

      jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer

      大小:272 MBjQuery

      点击下载
    • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

      大小:167.1 MB前端开发

      点击下载
    • JavaScript和jQuery实战手册

      JavaScript和jQuery实战手册

      JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

      大小:103 MBJavaScript

      点击下载
    • 锋利的jQuery

      锋利的jQuery

      《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

      大小:194.9 MBjQuery

      点击下载

    学习笔记

    42小时16分钟前回答

    jquery插件validate使用示例

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head title/title !-- 注意引用顺序-- script src=Jquery1.7.js type=text/javascript/script script src=jquery.validate.js type=text/javascript/script script src=messages_cn.js type=text/javascript/script script type=text/javascript // $(function () { // $(#a).validate({ // rules: { // username: { required: true, minlength: 6, maxlength: 12 }, // email: { required: true, email: true } // }, // errorshow: function (error, element) { // error.appendTo(element.siblings(span)); // } // }) // }) $(function () { $(#a).validate({ rules: { username: { required: true, minlength: 6, maxlength: 12 }, email: { required: true, email: true }, pwd: {……

    4小时36分钟前回答

    jquery插件制作方法

    一、先从一个简单的实例,不需要带参数的一个方法开始 //创建一个匿名函数 (function($){ //给jQuery附加一个新的方法(详细见备注1) $.fn.extend({ //插件的名字 MyFirstName: function() { //迭代当前匹配元素集合 return this.each(function() { var obj = $(this); //自己的代码 }); } }); )(jQuery); 备注1:理解$.fn.extend和$.extend的区别,大概的说前者是将MyFirstName这个方法合并到jquery的实例对象中,例如$(#txtmy).add(3,4)这样调用方法,后者是将MyFirstName这个方法合并到jquery的全局对象中,例如$.add(3,4); 这样调用方法 二、有参数的 //创建一个匿名函数 (function($){ //给jQuery附加一个新的方法(详细见备注1) $.fn.extend({ //插件的名字 MyFirstNam……

    31小时48分钟前回答

    理解jQuery返回定位插件

    一、jQuery 提供开发者开发插件的几种模式 1. $.extend(); //这个方法是绑定在$上面的。可以通过$直接调用 2. $.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$().方法名();调用 3. $.widget //通过jQuery UI 部件工厂模式创建。 二、插件的开发过程 1.$.extend(); 这个方法其实很简单,只是像$上面添加了一个静态的方法而已。主要用途是对插件api的扩展. eg: //$.extend();为了防止,变量和方法之间的相互污染,我们采用闭包的模式。 (function($,factory){ var obj = factory(); $.extend({ sayHelloWorld:obj.firstApply, }) $.secondApply = obj.secondApply; })(jQuery,function(){ var obj = { firstApply(){ console.log(hello world); }, secondApply(){ console.log(直接绑定到$上……

    40小时22分钟前回答

    jQuery图片切换插件jquery.cycle.js实例效果

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后。 head script type=text/javascript src=js/jquery-1.8.0.min.js/script script type=text/javascript src=js/jquery.cycle.all.js/script link href=style.css rel=stylesheet type=text/css /head jquery.cycle.all.js在演示代码中有。 Cycle插件可以作用于页面中的任何一组同辈元素。为展示这一点,我们需要一个简单的 HTML文档,文档中是一个包含商品封面和相关信息的列表,可以添加到HTML文档的主体中: ul id=goods li img src=img/lenovopad.jpg alt=lenove pad / div class=title联想A3000(8GB/白色)/div div class=author娱乐……

    32小时9分钟前回答

    分享jquery幻灯片插件bxslider样式改进方法

    本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考。具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动。 但是官方提供的显示效果真的很难看,让人难以接受。最后只能自己DIY了。 bxslider官方样式如下: 改造后的样式如下: 第一步:引入bxslider !-- jQuery library (served from Google) -- script src=//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js/script !-- bxSlider Javascript file -- script src=/js/jquery.bxslider.min.js/script !-- bxSlider CSS file -- link href=/lib/jquery.bxslider.css rel=stylesheet / !-- jQuery library (served from Google) -- script src=//ajax.googleapis.com/ajax/libs/jqu……

    23小时58分钟前回答

    小结jquery.messager.js插件导致页面抖动的解决方案

    消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上!DOCTYPE 标签 PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ……

    17小时21分钟前回答

    总结jQuery关键词说明插件cluetip使用指南

    我们开发的网站,总有它一定的用途。如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验。既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容)。例如企业站的关键词大部分是企业名称或产品名称,技术站的关键词大部分是技术术语。不论是企业宣传产品或分享思路经验,我们都想给某些术语加上说明或链接(跳转到术语页面),这时我们就可以使用cluetip插件。 1. cluetip插件功能 主要用于为某些关键词添加提示说明功能,也可以展示广告。cluetip插件可以读取另一个html文件中的内容, 如 a class=custom-width href=ajax3.html rel=ajax3.html关键词/a 会读取ajax3.html页……

    17小时29分钟前回答

    jquery选项卡鼠标延迟的插件实例代码详解

    !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html meta http-equiv=Content-Type content=text/html; charset=utf-8 / script type=text/javascript src=js/jquery-1.7.min.js/script head title选项卡插件制作/title style type=text/css *{margin: 0;padding: 0} .tab{width: 350px;margin: 100px auto;} .tabnav li{ list-style:none;cursor:pointer;float: left;width: 80px;border: 1px solid #ccc;border-radius: 5px;margin-right: 5px; height:24px;line-height: 24px;text-align: center;} .tabnav li.cur{background:#daa520;} .tabcontent{display: none;padding: 20px;} .tabcon{border: 1px #708090 solid;background: #ffc0cb;height: 300px;clear: both;} /style /head script (function($){ $.fn.extend({ myTab:function(options){ var confings={ tabNav:,//tab导航名称 ……

    36小时57分钟前回答

    jQuery网页遮罩层插件用法示例效果

    本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下。 其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写。现在就来分析一下这个组件的源码和使用 /** * @部分参数说明 */(function($){ $.fn.extend({ //主函数 toggleLoading: function(options){ // 找到遮罩层 var crust = this.childr……

    27小时39分钟前回答

    jquery插件dialog实现弹框效果的实例内容

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title弹框遮罩效果/title style type=text/css #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} /style script type=text/javascript language=javascript src=jquery-1.7.1.min.js /script script type=text/javascript language=javascript src=jquery-ui-1.8.18.custom.min.js /script link rel=stylesheet href=ui-lightness/jquery-ui-1.8.18.custom.css/ script type=text/javascript language=javascript $(function(){ $(#dialog).dialog({ autoOpen:f……

    23小时2分钟前回答

    jQuery对话框插件开发

    前言: 之所以写下这篇文章,是想将我的想法分享给大家;对于初学者,我希望他能从这篇文章中获取对他有用的东西,对于经验丰富的开发者,我希望他能指出我的不足,给我更多的意见和建议;目的就是共同进步。 一.要做什么插件? 我想要实现一个插件可以取代浏览器默认的弹出对话框或窗体,就是我们通过调用window.alert,window.confirm,window.prompt这些方法 所弹出的网页对话框,通过调用window.open,window.showModalDialog,window.showModelessDialog 所弹出的窗体。 之所以这样做是因为:浏览器默认的对话框功能简单,不能满足更多需要;用户体验差。现代浏览器很多都会默认阻止弹出窗体(可能是因为在以……