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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
来自qq的javascript面试题
Jul 24 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue中render函数的使用详解
Oct 12 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
对javascript和select部件的结合运用
2006/10/09 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python多进程同步简单实现代码
2016/04/27 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
Python调用C语言程序方法解析
2020/07/07 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
机电专业体育教师求职信
2013/09/21 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
气象学专业个人求职信
2014/04/22 职场文书
借款担保书范文
2014/05/13 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
教师个人事迹材料
2014/12/17 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫