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中设置他的属性和值 此配 ...
随机推荐
- debug方法
debug as -> spring boot->开始了 可以添加 ,, 来进行向下步骤:使用其他方法(在方法内打点) 一步步F6就可以了
- Javassist之使用字节码在运行时生成新的类 01
介绍 Javassist是一个开源的分析.编辑和创建Java字节码的类库.是由东京工业大学的数学和计算机科学系的 Shigeru Chiba (千叶 滋)所创建的.它已加入了开放源代码JBoss 应用 ...
- C#使用WebClient下载文件到本地目录
C#使用WebClient下载文件到本地目录. 1.配置本地目录路径 <appSettings> <!--文件下载目录--> <add key="Downloa ...
- java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=fun2], {ExactMatcher:fDisplayName=fun2(cn.itcast.demo2.fun1)], {LeadingIdentifierMatcher:fClassName=cn.itcast.demo2.fun1,fLeadi
Junit报的错误, 在测试方法前面没有添加注解@Test
- 只要访问url地址 那么容器就会根据地址进行对象的创建
只要访问url地址 那么容器就会根据地址进行对象的创建
- 【建模应用】PCA主成分分析原理详解
原文载于此:http://blog.csdn.net/zhongkelee/article/details/44064401 一.PCA简介 1. 相关背景 上完陈恩红老师的<机器学习与知识发现 ...
- Python介绍及环境配置
Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...
- url.openconnection() 设置超时时间
System.setProperty("sun.net.client.defaultConnectTimeout", "30000"); System.setP ...
- [IOI2018]机械娃娃——线段树+构造
题目链接: IOI2018doll 题目大意:有一个起点和$m$个触发器,给出一个长度为$n$的序列$a$,要求从起点出发按$a$的顺序经过触发器并回到起点(一个触发器可能被经过多次也可能不被经过), ...
- Codeforces Round #472 Div. 1
A:某个格子被染黑说明该行和该列同时被选中,使用并查集合并,最后看每个集合中是否有未被染黑的格子即可. #include<iostream> #include<cstdio> ...