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


Posted in Javascript onMarch 04, 2017

本文实例讲述了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插件echarts实现的多折线图效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 #Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 #Javascript
JS html时钟制作代码分享
Mar 03 #Javascript
AngularJS路由实现页面跳转实例
Mar 03 #Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 #Javascript
求js数组的最大值和最小值的四种方法
Mar 03 #Javascript
jQuery控制元素隐藏和显示
Mar 03 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
制作特殊字的脚本
2006/06/26 Javascript
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python解析xml文件操作实例
2014/10/05 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python生成器与迭代器详解
2019/01/01 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
结构工程研究生求职信
2013/10/13 职场文书
党校学习自我鉴定
2014/02/24 职场文书
企业新年寄语
2014/04/04 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
考研导师推荐信范文
2015/03/27 职场文书
董事会决议范本
2015/07/01 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers