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;
   }
   #line{
    width:100%;
    height:99%;
   }
  </style>
  <script>
   $(document).ready(function(){
    var chart = document.getElementById("line");
    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, 7890, 6230, 5210]
      }
     ]
    };
    echart.setOption(option);
   });
  </script>
 </head>
 <body>
  <div id="line"></div>
 </body>
</html>

3、实现效果图:

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

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

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

Javascript 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 #Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 #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
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php获取错误信息的方法
2015/07/17 PHP
php实现URL加密解密的方法
2016/11/17 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python super()方法原理详解
2020/03/31 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
《挑山工》的教学反思
2014/02/16 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
爱我中华演讲稿
2014/05/20 职场文书
环保项目建议书
2014/08/26 职场文书
2014年预算员工作总结
2014/12/05 职场文书
运动与健康自我评价
2015/03/09 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
python数字转对应中文的方法总结
2021/08/02 Python
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技