jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
更新时间：2017年03月04日 10:40:52 作者：翱翔天地
这篇文章主要介绍了jQuery插件echarts实现的多柱子柱状图效果,结合完整实例形式分析了echarts绘制多柱子柱状图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery的链式操作是如何实现的？为什么要用链式操作？接下来会帮助大家解决这两个问题，感兴趣的朋友可以了解下2013-01-01
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
jQuery lazyLoad.js插件 是一款基于jquery框架，可以“实现”图片延迟加载的插件2013-08-08
需要一个手风琴效果，就动手写了一个。其实有多个现成的jQuery手风琴插件可以用，但对比了一下，总感觉有些笨重，还是自己写的脉络自己最清楚，扩展起来也更容易些2014-03-03
这篇文章主要介绍了EasyUI中combobox默认值注意事项,是个人在项目中遇到并解决的事宜，分享给大家，需要的朋友可以参考下2015-03-03
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
这篇文章主要介绍了jQuery实现的给图片点赞+1动画效果,并附带在线演示及demo源码下载,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下2015-12-12
js获取通过ajax返回的map型的JSONArray的方法
下面是js获取通过ajax返回的map型的JSONArray的详细代码，需要的朋友可以参考下2014-01-01
这篇文章主要介绍了jQuery实现带滚动导航效果的全屏滚动相册,涉及jQuery针对页面图片元素与鼠标事件的相关操作技巧,需要的朋友可以参考下2015-06-06
jQuery基础 -- 处理表单元素2010-02-02
这篇文章主要介绍了Treegrid的动态加载实例代码的相关资料,需要的朋友可以参考下2016-04-04
jquery实现的回旋滚动效果完整实例【附demo源码下载】
这篇文章主要介绍了jquery实现的回旋滚动效果,可实现点击后侧图片呈现立体翻转切换的功能,涉及jQuery插件roundabout.js的使用,并附带了完整实例demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
最新评论