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 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
vue.js todolist实现代码
Oct 29 Javascript
React中的render何时执行过程
Apr 13 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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下对数组进行排序的函数
2010/08/08 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
python的id()函数介绍
2013/02/10 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis