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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
easyui validatebox验证
Apr 29 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
vue中 v-for循环的用法详解
Feb 19 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
给多个地址发邮件的类
2006/10/09 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python的Tqdm模块的使用
2018/01/10 Python
Django开发中复选框用法示例
2018/03/20 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
自信主题班会
2015/08/14 职场文书