jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】


Posted in Javascript onMarch 04, 2017

本文实例讲述了jQuery插件Echarts实现的双轴图效果。分享给大家供大家参考,具体如下:

1、问题描述:

利用Echarts制作一个折线图,条件是:三条折线,一条代表可利用率,另外两条代表数量。

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;
      }
      #double{
        width: 100%;
        height: 100%;
        font-family: "agency fb";
        font-weight: bolder;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById('double');
        var echart = echarts.init(chart);
        var option = {
          title : {
            text: '可利用率',
            subtext: '',
            x: 'center',
            align: 'right'
          },
          grid: {
            bottom: 80
          },
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              animation: false
            },
            formatter: function (params) {
              var res = params[0].name;
              for (var i = 0, l = params.length; i < l; i++)
              {
                if(i==0)
                {
                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "%";
                }
                else
                {
                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                }
              }
              return res;
            }
          },
          legend: {
            data:['可利用率','A','B'],
            x: 'left'
          },
          xAxis : [
            {
              type : 'category',
              axisLabel: {
                rotate: 45
              },
              boundaryGap : false,
              axisLine: {onZero: false},
              data : ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月','2016年6月','2016年7月','2016年8月','2016年9月','2016年10月','2016年11月','2016年12月'].map(function (str) {
                return str.replace(' ', '\n')
              })
            }
          ],
          yAxis: [
            {
              name: '可利用率',
              type: 'value',
              max: 100,
              axisLabel: {
               show: true,
               interval: 'auto',
               formatter: '{value} %'
              }
            },
            {
              name: 'A',
              nameLocation: 'start',
              type: 'value',
              inverse: true
            },
            {
              name: 'B',
              nameLocation: 'start',
              type: 'value',
              inverse: true
            }
          ],
          series: [
            {
              name:'可利用率',
              type:'line',
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  label : {
                    show:false,
                    position:'top',
                    formatter:'{c} %'
                  }
                }
              },
              areaStyle: {
                normal: {}
              },
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              data:[12,78,34,67,88,45,65,77,31,21,90,54]
            },
            {
              name:'A',
              type:'line',
              yAxisIndex:1,
              hoverAnimation: false,
              areaStyle: {
                normal: {}
              },
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              data: [1,4,5,8,3,2,7,6,9,2,4,3]
            },
            {
              name:'B',
              type:'line',
              yAxisIndex:1,
              hoverAnimation: false,
              areaStyle: {
                normal: {}
              },
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              data: [0,2,3,7,1,0,5,2,6,1,2,1]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="double"></div>
  </body>
</html>

3、实现效果图:

jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js遍历、动态的添加数据的小例子
Jun 22 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
简单实现js菜单栏切换效果
Mar 04 #Javascript
浅谈javascript的url参数parse和build函数
Mar 04 #Javascript
js css3实现图片拖拽效果
Mar 04 #Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 #Javascript
JavaScript中最常见的三个面试题解析
Mar 04 #Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 #Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 #Javascript
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
js获取height和width的方法说明
2013/01/06 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
Js apply方法详解
2017/02/16 Javascript
js中new一个对象的过程
2017/02/20 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python音频处理用到的操作的示例代码
2017/10/27 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
大学生学习自我评价
2014/01/13 职场文书
加拿大留学自荐信
2014/01/28 职场文书
经典团队口号
2014/06/06 职场文书
工程合作意向书范本
2015/05/09 职场文书