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 Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
如何利用node转发请求详解
Sep 17 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
layui导出所有数据的例子
2019/09/10 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python绘制多个曲线的折线图
2020/03/23 Python
python实现简单登陆系统
2018/10/18 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
幼儿园教师个人总结
2015/02/05 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技