



下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】如何用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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025至2030中国男士全棉内裤行业市场发展现状及商业模式与投融资战略报告
- 2025至2030中国电动控制元件行业产业运行态势及投资规划深度研究报告
- 2025至2030中国电冰箱行业产业运行态势及投资规划深度研究报告
- 中医教育资源国际共享与跨文化教学研究
- 非公企业党建培训课件
- 教育行业中的科技驱动力量-论区块链在学术诚信建设中的重要性
- 智慧安防保护每一座学校-智能监控系统的实践
- 教育技术评估模型的构建及其在实践中的应用研究
- 智慧城市公共服务中的教育系统优化研究
- 商业环境中员工心理健康的支持体系
- 第三届全国技能大赛竞赛(装配钳工)选拔赛备考试题(附答案)
- 公路工程课件大学
- 初中历史人教部编版八年级上册第18课 从九一八事变到西安事变教学设计
- 《民法学课件》课件-第五编-第十六章 所有权通论
- 能源计量管理培训课件
- 心力衰竭教案
- 江苏省2024年普通类本科批次平行志愿投档线(物理等科目类)
- 2025年班组长综合管理技能竞赛理论考试题库500题(含答案)
- 苏州市公司员工2025年度劳动合同模板:劳动合同签订与员工考核评估
- 致远OA系统培训
- 2024-2025学年四川省成都市锦江区八年级上学期期末数学试卷(含答案)
评论
0/150
提交评论