echarts柱状图 渐变色
效果图:
var xAxisData = [];
var data = [];
for (var i = 9; i < 16; i++) {
xAxisData.push('5月' + i + '日');
data.push(Math.round(Math.random() * 500) + 200);
}
option = {
title: {
text: '柱状图示例',
subtext: 'https://segmentfault.com/q/1010000005137138',
sublink: 'https://segmentfault.com/q/1010000005137138'
},
xAxis: [{
data: xAxisData.map(function(x){
if(x == "5月11日")return " ";
return x;
}),
axisLabel: {
textStyle: {
color: '#03a9f4'
}
},
splitLine: {
show: false
}
}, {
// 辅助 x 轴
show: false,
data: xAxisData.map(function(x){
if(x == "5月11日")return " ";
return x;
})
}],
yAxis: {
max: 1000,
axisLine: {
show: false
}
},
series: [
{
// 辅助系列
type : 'bar',
silent : true,
xAxisIndex : 1,
itemStyle : {
normal : {
barBorderRadius: 20,
color : '#ddd'
}
},
barWidth: 20,
data: data.map(function (val) {
return 1000;
})
},
{
type: 'bar',
data: data,
barWidth: 20,
itemStyle: {
normal: {
barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#99d9ea'
}, {
offset: 1,
color: '#3fa7dc'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
}
}
}
]
};
echarts柱状图 渐变色的更多相关文章
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- echarts柱状图标签显示不完全的问题
echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts柱状图个数多,横坐标名称过长显示不全解决方法
当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...
- Flask插件wtforms、Flask文件上传和Echarts柱状图
一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...
- Echarts 柱状图配置详解
1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...
- ECharts柱状图
首先我们要先去Echarts 官网 根据自己需要的版本进行下载下载 下载完成后,我们在项目中引入echarts 随后创建容器来存放我们要添加的柱状图 容器创建完毕我们需要在js中设置他的属性和值 此配 ...
随机推荐
- GitHub & OAuth 2.0 & JWT
GitHub & OAuth 2.0 & JWT https://www.rfcreader.com/#rfc6749 GitHub & OAuth https://www.b ...
- postfix 邮箱设置及常见错误
postfix 邮箱设置及常见错误 1.如果装了sendmail的话,先卸载了. yum remove sendmail 2.安装 Postfix yum install postfix 3.更改默认 ...
- 三星 SCX-4521NS 网络打印机 在XP 下 强行 设置 安装
添加打印机加上之后,图标是半虚的,状态脱机,网上找了很多方法都不好使. 包括官方的:http://www.samsung.com/cn/support/skp/faq/442292 然后死马当活马医, ...
- 一、Java多人博客系统-开篇
作为一个程序员,工作之外的不断学习是必须的.这个项目是我个人课外学习和练手的项目.最开始是一个个人网站.当时发现京东云可以免费部署网站的,就立即写了一个网站,当时就使用jsp技术,可以实现发布博客.评 ...
- [BZOJ 2186] [SDOI 2008] 沙拉公主的困惑
Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为 \(1\) 到 \(N\) 的阶乘,但是,政府只发行编号与 \(M!\) 互质的钞票.房地产第 ...
- kubernetes增加污点,达到pod是否能在做节点运行
master node参与工作负载 (只在主节点执行)使用kubeadm初始化的集群,出于安全考虑Pod不会被调度到Master Node上,也就是说Master Node不参与工作负载. 这里搭建的 ...
- P1035 调和级数
两种解法如下: 1.模拟 这种做法的思路是枚举n从1开始,直到Sn>k结束,只需要一个循环即可实现. 代码: #include<cstdio> int main() { ; scan ...
- POJ2763-Housewife Wind-树上单点修改区间求和
这道题可以树链剖分做.但是最近在给学弟搞数据结构复习了LCA树状数组RMQ 然后就搞了一发LCA+树状数组维护. dis数组维护当前点到根节点的权值和.则dis(u,v) = dis[u]+dis[v ...
- Snowflake Snow Snowflakes POJ - 3349 Hash
题意:一个雪花有六个角 给出N个雪花 判断有没有相同的(可以随意旋转) 参考:https://blog.csdn.net/alongela/article/details/8245005 注意:参考 ...
- 概念数据模型CDM基础
概念数据模型CDM 概念数据模型是设计数据库不可或缺的一步,是整个数据库设计的关键,CDM的主要作用如下: 1)能够真实地模拟真实世界,是需求分析人员和数据库设计人员沟通的桥梁.2)将系统需求分析得到 ...