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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
javascript实现放大镜功能
Dec 09 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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
我的论坛源代码(十)
2006/10/09 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
django批量导入xml数据
2016/10/16 Python
Python中turtle作图示例
2017/11/15 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
农村婚礼主持词
2014/03/13 职场文书
新春联欢会主持词
2014/03/24 职场文书
基层党员公开承诺书
2014/05/29 职场文书
升职自荐信范文
2015/03/27 职场文书
文明礼仪倡议书
2015/04/28 职场文书