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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
通过实例了解js函数中参数的传递
Jun 15 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
解决Vue动态加载本地图片问题
Oct 09 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python书籍信息爬虫实例
2018/03/19 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python笔试面试题小结
2019/09/07 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
党员自我评价分享
2013/12/13 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
惊天动地观后感
2015/06/10 职场文书