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 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JavaScript错误处理
Feb 03 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php语法检查的方法总结
2019/01/21 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
ajax异步请求详解
2017/01/06 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
使用Python神器对付12306变态验证码
2016/01/05 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
SQL Server笔试题
2012/01/10 面试题
学校2014重阳节活动策划方案
2014/09/16 职场文书
观后感的写法
2015/06/19 职场文书
《迟到》教学反思
2016/02/24 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript