编程 Javascript

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程序设计有所帮助。

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

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 用原型继承来实现对象系统

Mar 22 Javascript

js获取当前select 元素值的代码

Apr 19 Javascript

jQuery.Validate验证库的使用介绍

Apr 26 Javascript

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

Jun 16 Javascript

XML文件转化成NSData对象的方法

Aug 12 Javascript

ECMA5数组的新增方法有哪些及forEach（）模仿实现

Nov 03 Javascript

js实现的万能flv网页播放器代码

Apr 30 Javascript

浅谈JavaScript 执行环境、作用域及垃圾回收

May 31 Javascript

JS模拟超市简易收银台小程序代码解析

Aug 18 Javascript

JS小球抛物线轨迹运动的两种实现方法详解

Dec 20 Javascript

Angular6 发送手机验证码按钮倒计时效果实现方法

Jan 08 Javascript

JS前端宏任务微任务及Event Loop使用详解

Jul 23 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