jQuery插件echarts实现的多折线图效果示例【附demo源码下载】

 更新时间:2017年03月04日 09:15:05   转载 作者:翱翔天地  
这篇文章主要介绍了jQuery插件echarts实现的多折线图效果,结合完整实例形式分析了echarts插件绘制多折线图效果的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了jQuery插件echarts实现的多折线图效果。分享给大家供大家参考,具体如下:

1、问题背景:

设计一个折线图,折线图展示苹果、香蕉的销售量

2、实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-多折线图</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="echarts.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #someline{
        width:100%;
        height:99%;
      }
    </style>
    <script>
      $(document).ready(function(){
        var chart = document.getElementById("someline");
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: '水果销售量'
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            data:['苹果','香蕉']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              data : ['第一季度','第二季度','第三季度','第四季度']
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'苹果',
              type:'line',
              stack: '销量',
              areaStyle: {normal: {}},
              data:[1270, 6382, 2091, 1034]
            },
            {
              name:'香蕉',
              type:'line',
              stack: '销量',
              areaStyle: {normal: {}},
              data:[2270, 3456, 5432, 3423]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="someline"></div>
  </body>
</html>

3、实现效果图:

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

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

相关文章

  • jquery ajax方式直接提交整个表单核心代码

    jquery ajax方式直接提交整个表单核心代码

    提交表单的方法有很多,想必大家都知道一些吧,下面为大家讲解下使用ajax的方式提交整个表单,具体实现如下,有此需求的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • jQuery跨域问题解决方案

    jQuery跨域问题解决方案

    通过XMLHTTPRquest请求不同域上的数据,原来js跨域访问是后台有个处理路径“/test”的函数。下面给大家介绍jQuery跨域问题解决方案,有需要的小伙伴可以参考下
    2015-08-08
  • ASP.NET中基于JQUERY的高性能的TreeView补充

    ASP.NET中基于JQUERY的高性能的TreeView补充

    根据 假正经哥哥 的博客整理,我第一次使用的另外的TREEVIEW,可是 做出来的效果 太卡,不知道什么原因。这次用的假正经哥哥的这篇文章。
    2011-02-02
  • jQuery阻止冒泡和HTML默认操作

    jQuery阻止冒泡和HTML默认操作

    jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。
    2010-11-11
  • jQuery实现单击和鼠标感应事件

    jQuery实现单击和鼠标感应事件

    这篇文章主要介绍了jQuery实现单击和鼠标感应事件的方法的相关资料,需要的朋友可以参考下
    2015-02-02
  • JQuery显示、隐藏div的几种方法简明总结

    JQuery显示、隐藏div的几种方法简明总结

    这篇文章主要介绍了JQuery显示、隐藏div的几种方法简明总结,本文总结了控制style、控制CSS、JQuery自带方法等几种显示、隐藏div的方法,需要的朋友可以参考下
    2015-04-04
  • jquery sortable的拖动方法示例详解

    jquery sortable的拖动方法示例详解

    本文以示例的方式为大家介绍下jquery sortable的拖动方法的具体实现,感兴趣的朋友可以参考下
    2014-01-01
  • jQuery 操作option的实现代码

    jQuery 操作option的实现代码

    js清空option之前清空option ,我的做法是遍历现有option,将其每个子元素都置空即可。
    2011-03-03
  • jquery无限级联下拉菜单简单实例演示

    jquery无限级联下拉菜单简单实例演示

    这篇文章主要向大家推荐了一个jquery无限级联下拉菜单简单实例演示,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JQuery中ajax方法访问web服务实例

    JQuery中ajax方法访问web服务实例

    这篇文章主要介绍了JQuery中ajax方法访问web服务的方法,实例分析了jquery中Ajax方法结合asp.net程序处理web访问的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论