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 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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导入Excel到MySQL的方法
2011/04/23 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
物业经理求职自我评价
2013/09/22 职场文书
经理秘书岗位职责
2013/11/14 职场文书
求职简历推荐信范文
2013/12/02 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
2016公司年会主持词
2015/07/01 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫