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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
ftp类(myftp.php)
2006/10/09 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php xfocus防注入资料
2008/04/27 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python 使用type来定义类的实现
2019/11/19 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
给护士表扬信
2014/01/19 职场文书
火锅店营销方案
2014/02/26 职场文书
投标承诺书范本
2014/03/27 职场文书
党性教育心得体会
2014/09/03 职场文书
作文评语集锦
2014/12/25 职场文书
保证书格式
2015/01/16 职场文书
迟到检讨书
2015/01/26 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
检讨书模板大全
2015/05/07 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Python基础详解之描述符
2021/04/28 Python
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
redis 解决库存并发问题实现数量控制
2022/04/08 Redis