脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery插件echarts去掉X轴、Y轴和网格线

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

 更新时间：2017年03月04日 11:37:15   作者：翱翔天地  
这篇文章主要介绍了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果,结合实例形式分析了echarts插件绘制表格图及图形相关属性设置操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • JQuery Ajax 跨域访问的解决方案

    JQuery Ajax 跨域访问的解决方案

    我们知道ajax本身实际上是通过XMLHttpRequest对象来异步进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以js跨域操作会被拒绝。
    2010-03-03
  • jquery实现pager控件示例

    jquery实现pager控件示例

    这篇文章主要介绍了jquery实现pager控件示例,需要的朋友可以参考下
    2014-04-04
  • jquery中使用ajax获取远程页面信息

    jquery中使用ajax获取远程页面信息

    当我们点击表格里面的标题显示相关的详细信息，比如点击新闻标题显示正文，而正文通常是在一个页面里面，通过获取传递的参数id查询数据库，然后显示出来
    2011-11-11
  • $.get获取一个文件的内容示例代码

    $.get获取一个文件的内容示例代码

    使用$.get可以获取一个文件的内容，实现很简单，示例如下，喜欢的朋友可以参考下
    2013-09-09
  • jquery mobile移动端幻灯片滑动切换效果

    jquery mobile移动端幻灯片滑动切换效果

    这篇文章主要为大家详细介绍了jquery mobile移动端幻灯片滑动切换效果，实现滑动切换和点击切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 浅谈jquery点击label触发2次的问题

    浅谈jquery点击label触发2次的问题

    下面小编就为大家带来一篇浅谈jquery点击label触发2次的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • EasyUI 数据表格datagrid列自适应内容宽度的实现

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    这篇文章主要介绍了EasyUI 数据表格datagrid列自适应内容宽度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • jQuery表格行换色的三种实现方法

    jQuery表格行换色的三种实现方法

    一般情况下使用第二种方法是可以的，但是遇到表格行可以拖拽的情况，那么就会出现BUG了，这个自行测试就知道了。
    2011-06-06
  • jQuery调用RESTful WCF示例代码(GET方法/POST方法)

    jQuery调用RESTful WCF示例代码(GET方法/POST方法)

    本篇文章主要介绍了jQuery调用RESTful WCF示例代码(GET方法/POST方法)，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • jQuery文字轮播特效

    jQuery文字轮播特效

    本文给大家分享的是jQuery制作文字轮播的特效，非常的实用，属于作者原创代码，分享给大家
    2017-02-02

最新评论