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 变量命名规则
Sep 23 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
原生js实现自定义滚动条
Jan 20 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队列用法实例
2014/11/05 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
js 数组操作代码集锦
2009/04/28 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery功能函数详解
2015/02/01 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python生成并处理uuid的实现方式
2020/03/03 Python
python Paramiko使用示例
2020/09/21 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
年度考核自我鉴定
2013/11/09 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
全网非常详细的pytest配置文件
2022/07/15 Python