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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
python中正则表达式的使用详解
2014/10/17 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
django框架中间件原理与用法详解
2019/12/10 Python
药学专业毕业生求职信
2013/10/20 职场文书
中英双版中文教师求职信
2013/10/27 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
医院志愿者活动总结
2015/05/06 职场文书
社区服务理念口号
2015/12/25 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书