下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】如何用jQuery插件Echarts实现的渐变色柱状图
今天在下给大家分享一下如何用jQuery插件Echarts实现的渐变色柱状图的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。效果图：代码如下：<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>ECharts柱状图</title>
</head>
<body>
<!--
为ECharts准备一个具备大小（宽高）的Dom
-->
<div
id="container"
></div>
<script
typet="text/javascript"
src="/jquery/1.9.1/jquery.min.js"></script>
<script
type="text/javascript"
src="/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'}
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论