jQuery插件Echarts实现的渐变色柱状图
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts柱状图</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container" style="width: 600px;height:400px; margin: 100px auto 20px;"></div>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
var xAxisData = [];
var data = [];
for (var i = 20; i < 29; i++) {
xAxisData.push('2' +'/'+ i);
data.push(Math.round(Math.random() * 500) + 200);
}
// 初始 option
option = {
title: {
text: '每日成交额（万元）'
},
tooltip: {
trigger: 'axis',
borderColor: '#636F7F',
borderWidth : 1,
backgroundColor : 'rgba(99,111,127,1)',
textStyle:{
color : '#ffffff',
// fontWeight : 'bold',
fontSize : 14,
},
transitionDuration : 0.6,
formatter: '{b0}<br />{c0}(万元)',
axisPointer :{
type : 'line',
lineStyle : {
color : '#05F41E',
width : 1,
type : 'solid',
},
},
// axisPointer : { // 坐标轴指示器，坐标轴触发有效
// type : 'shadow', // 默认为直线，可选为：'line' | 'shadow'
// shadowStyle :{
// color : '#D6EAFA',
// opacity : 0.5,
// }
// },
},
calculable : true,
xAxis: {
data: xAxisData.map(function(x){
return x;
}),
axisLabel: {
textStyle: {
color: '#333',
align : 'center',
baseline : 'top'
},
rotate : 20,
margin : 15,
},
},
yAxis: {
// 横向标线 默认为TRUE
splitLine: {
show: true,
},
axisLabel: {
textStyle: {
color: '#333'
}
},
type : 'value',
boundaryGap : false,
// 分隔线线的类型
splitLine: {
show: true,
lineStyle :{
color : '#EFF0F0',
type : 'dashed',
}
}
},
series: {
type: 'bar',
data: data,
barWidth: 15,
itemStyle: {
normal: {
barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#37BBF8'
}, {
offset: 1,
color: '#2294E4'
}]),
// shadowColor: 'rgba(35,149,229,0.8)',
// shadowBlur: 20,
areaStyle: {type: 'default'}
}
}
},
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
详解ECharts使用心得总结
前言 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个ECharts报表呈现组件,挺不错的一个组件,而且地图数据都是离线的,真心很赞.但是,使用起来却颇费了一番工夫.所以就把使用中的一些心得体会跟大家分享一下. 1. 插件的下载 以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要
-
echarts3 使用总结（绘制各种图表,地图）
由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生
-
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
本文实例讲述了jQuery插件echarts实现的多柱子柱状图效果.分享给大家供大家参考,具体如下: 1.问题背景: 利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多柱子柱状图</title> <script type="text/
-
基于Echarts 3.19 制作常用的图形(非静态)
饼图: 环境:Echarts 3.19 vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错 具体代码,各位看官 请下移目光. <!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script> <script src="../Scripts/echarts/
-
Echarts基本用法_动力节点Java学院整理
echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts: 3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了: 4,兼容性好,基于html5动画渲染超棒. echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件. 官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现.这样毕竟比较
-
echarts图表导出excel示例
根据传入的参数生成相应的图形 复制代码 代码如下: loadChart : function(data,item){ var that = this; require(['echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie'], function(ec) { that.body.setHeight(800); var myChart = ec.init(that.body.dom);
-
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示 源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方
-
jQuery插件Echarts实现的渐变色柱状图
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="container" style="width:
-
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件echarts实现的多折线图效果.分享给大家供大家参考,具体如下: 1.问题背景: 设计一个折线图,折线图展示苹果.香蕉的销售量 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多折线图</title> <script type="text/javascript&qu
-
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法.分享给大家供大家参考,具体如下: 1.问题背景 设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-设置折线图中折线线条颜色和折线点颜色</t
-
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
本文实例讲述了jQuery插件echarts实现的循环生成图效果.分享给大家供大家参考,具体如下: 1.问题背景: 利用for循环生产多个气泡图,并且每个气泡都可以点击 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-循环生成图</title> <script type="text/javascr
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
本文实例讲述了jQuery插件echarts实现的去掉X轴.Y轴和网格线效果.分享给大家供大家参考,具体如下: 1.问题背景: 如何在echarts中,去掉X轴.Y轴和网格线,只留数据图形 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-去掉X轴.Y轴和网格线</title> <script type=&q
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts最新FusionCharts2D柱状图</title> <script type="text/javascript" sr
-
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
本文实例讲述了jQuery插件Echarts实现的双轴图效果.分享给大家供大家参考,具体如下: 1.问题描述: 利用Echarts制作一个折线图,条件是:三条折线,一条代表可利用率,另外两条代表数量. 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-双轴图</title> <script type=&quo
-
jQuery插件echarts去掉垂直网格线用法示例
本文实例讲述了jQuery插件echarts去掉垂直网格线用法.分享给大家供大家参考,具体如下: 1.问题背景 设计一条统计人数的折线,其中网格线没有垂直线 2.实现源码 (1)有垂直网格线 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-有垂直网格线</title> <link rel="shortcut ic
-
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件echarts实现的单折线图效果.分享给大家供大家参考,具体如下: 1.问题背景: 设计一个折线图,展示一个星期内水果销售量 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-单折线图</title> <script type="text/javascript"