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

本文实例讲述了jQuery插件echarts实现的多柱子柱状图效果。分享给大家供大家参考，具体如下：

1、问题背景：

利用电子艺术制作一个多柱子柱状图，其中数据源模拟动态获取

2、实现源码：

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-多柱子柱状图/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : echart。js /脚本样式正文，html { width :99%；高： 99%;font-family: 'arial，helvetica，sans-serif '；字号： x-大号；字体-字距：继承；字体拉伸：展开；} # ManyColumn {宽度： 100%；高度： 100%;font-size : 14px字体系列： '微软雅黑；背面-可见性：背景-混合-模式：继承；背景-origin:边框-方框；背景：内容盒；背景色-: # 5BC0DE；}/style script $(function(){ Build data()；});//生成数据函数BuildDATa(){ var列标签=['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];var columName=['周一','周二','周三','周四','周五','周六','周日'];var列值=新数组()；var arrData=new Array()；for(var I=0；icolumlabel . lengthi){ for(var j=0；jcolumName.lengthj){ arr数据。推(数学。地板(数学。random()* 1000 1000 * j-1000 * I))；}控制台。信息(arr数据)；列值。push(eval('('(' { ' name ' : ' '列标签[I]'，' type':'bar '，' data ' :[' arrData ']} '))))))；} buildChart(columLabel、columName、列值)；} //生成图形函数buildChart(columLabel，columName，列值){ var chart=document。getelementbyid('多列')；var echart=echarts.init(图表);var option={ tooltip : { trigger : ' axis }，axis posenter : { type : ' shadow ' }，toolbox: { show : true，feature : { Sava asige : { show : true } }，图例3: { data: columlabel }，网格： { left 33333: ' 3% '，right 33:选项);}/script/head body div id=' many column '/div/body/html 3，实现效果图：

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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