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: "arial, helvetica, sans-serif";
        font-size: x-large;
        font-kerning: inherit;
        font-stretch: expanded;
      }
      #manyColumn{
        width: 100%;
        height: 100%;
        font-size: 14px;
        font-family: "微软雅黑";
        backface-visibility: visible;
        background-blend-mode: inherit;
        background-origin: border-box;
        background: content-box;
        background-color: #5BC0DE;
      }
    </style>
    <script>
      $(function(){
        buildData();
      });
      //生成数据
      function buildData()
      {
        var columLabel = ['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];
        var columName = ['周一','周二','周三','周四','周五','周六','周日'];
        var columnValue = new Array();
        var arrData = new Array();
        for(var i=0;i<columLabel.length;i++)
        {
          for(var j=0;j<columName.length;j++)
          {
            arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));
          }
          console.info(arrData);
          columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));
        }
        buildChart(columLabel,columName,columnValue);
      }
      //生成图形
      function buildChart(columLabel,columName,columnValue)
      {
        var chart = document.getElementById('manyColumn');
        var echart = echarts.init(chart);
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {
              type : 'shadow'
            }
          },
           toolbox: {
            show : true,
            feature : {
              saveAsImage : {show: true}
            }
          },
          legend: {
            data:columLabel
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              min:0,
              type : 'category',
              data : columName
            }
          ],
          yAxis : [
            {
              min:0,
              type : 'value'
            }
          ],
          series : columnValue
        };
        echart.setOption(option);
      }
    </script>
  </head>
  <body>
    <div id="manyColumn"></div>
  </body>
</html>

3、实现效果图:

jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】

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

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

Javascript 相关文章推荐
jquery、js操作checkbox全选反选
Mar 12 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
js实现数字滚动特效
Dec 16 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 #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
You might like
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
ionic环境配置及问题详解
2017/06/27 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python编程使用协程并发的优缺点
2018/09/20 Python
python 自定义对象的打印方法
2019/01/12 Python
django Admin文档生成器使用详解
2019/07/22 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
构造器Constructor是否可被override?
2013/08/06 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
入党思想汇报
2014/01/05 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
门面房租房协议书
2014/12/01 职场文书
焦点访谈观后感
2015/06/11 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL