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操作页面表格,元素的一些技巧
Feb 02 Javascript
Javascript 布尔型分析
Dec 22 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
python多线程操作实例
2014/11/21 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python做简单的字符串匹配详解
2017/03/21 Python
使用python实现tcp自动重连
2017/07/02 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python实现对输入的密文加密
2019/03/20 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
护士岗位职责
2014/02/16 职场文书
旅游安全协议书
2014/04/21 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
刑事附带民事代理词
2015/05/25 职场文书
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers