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 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
javascript实现控制div颜色
Jul 07 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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
linux下为php添加curl扩展的方法
2011/07/29 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
javascript的几种写法总结
2016/09/30 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python实现简易淘宝购物
2019/11/22 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python实现翻译word表格小程序
2020/02/27 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
节约用水的口号
2014/06/20 职场文书
个人查摆剖析材料
2014/10/04 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
班主任经验交流材料
2014/12/16 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Python使用MapReduce进行简单的销售统计
2022/04/22 Python