Echarts 背景渐变柱状图

var dom = document.getElementById("container");
var myChart1 = echarts.init(dom);
var app = {};
option1 = null;
//初始化数据
var category = ['深圳市', '东莞市', '广州市', '惠州市', '北京市', '上海市', '武汉市'];
var barData = [7913, 4910, 3810, 2054, 988, 3979, 818];
var option1 = {
title: {
text: '柱状图示例',
textStyle: {
color: '#03a9f4'
}
},
legend: {
data:['用户数']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '16%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#ff0"
}
},
axisLabel: {
rotate:45, //倾斜度 -90 至 90 默认为0
show: false
},
axisTick: {
show: false
},
splitLine: { // 分隔线
show: false, // 默认显示,属性show控制显示与否
},
},
yAxis: {
type: 'category',
data: category,
splitLine: { // 分隔线
show: false, // 默认显示,属性show控制显示与否
},
axisLine: {
show: false,
lineStyle: {
color: "#ff0"
}
},
axisTick: {
show: false
},
offset: 10,
},
series: [
{
name: '数量',
type: 'bar',
data: barData,
barWidth: 14,
// barGap: 10,
// smooth: true,
label: {
normal: {
show: true,
position: 'right',
offset: [5, -2],
textStyle: {
color: '#F68300',
fontSize: 13
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: function(params){
var colorList = [
['#3977E6','#37BBF8'],
['#E8576C','#661C5A']
]
for(let i=0;i<barData.length;i++){
if(barData[params.dataIndex] <= 3000){
return new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#3977E6'},
{offset: 1, color: '#37BBF8'}
])
}else{
return new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#E8576C'},
{offset: 1, color: '#661C5A'}
])
}
}
}
},
},
},
]
};
if (option1 && typeof option1 === "object") {
myChart1.setOption(option1, true);
}
Echarts 背景渐变柱状图的更多相关文章
- echarts 堆叠柱状图 + 渐变柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- CSS3魔法堂:背景渐变(Gradient)
一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
- CSS3之firefox&safari背景渐变之争 - [前端技术][转]
Firefox浏览器下的渐变背景 Firefox3.6background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));chrome/S ...
- Tesseract处理背景渐变的图片
在Tesseract处理背景渐变图片不太理想的情况下, 可以利用Pillow库, 创建一个阈值过滤器来去掉渐变的背景色, 只把文字留下来, 从而让图片更清晰, 便于Tesseract读取: from ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
- less常用样式集,清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。
.clear-float() { content: ''; display: block; clear: both; height:; } //伪元素清除浮动 .after-clear() { &am ...
- UIView的背景渐变
//绘制背景渐变 /* CGCradientCreateWithColorComponents函数需要四个参数: 色彩空间:(Color Space)这是一个色彩范围的容器,类型必须是CGColorS ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
随机推荐
- pm2的的常用命令及用法
使用pm2启动静态文件服务器的方法如下: pm2 serve path port pm2 serve . 9001 这样就可以把当前文件夹下的静态文件跑起来了,而且端口号是9001, 同样也支持进阶的 ...
- [QualityCenter]QC是什么?发展历程是怎样?
QC,即Quality Center,是一个基于Web的测试管理工具.它可以组织和管理应用程序测试流程的所有阶段,包括制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center ...
- mongoose添加属性问题
在项目中遇到这样一个问题. 项目地址: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCar ...
- 微信小程序之怎样识别一个小程序用户
本节主要是说下怎样识别一个小程序的用户,需要用什么数据来做标识呢: 我们应该都知道判断是不是一个用户大部分都是通过userid来判断,如果这个用户访问的应用发送了一个请求,把userid之类的数据发给 ...
- Metasploitable渗透测试实战——生成木马
攻击机:kali 目标机:windows 1.生成木马 wincap发送至本机 2.进入msf (命令:msfconsole)启动监听 3.当目标点击test.exe(可伪装)时,触发后门,实现入 ...
- OpenCV视觉库
视频会议软件的视频质量除了与外置设备.编码器相关外,还与视频的后处理技术相关,视频图像通过后处理技术,如图像增强.图像去噪等,图像质量会得到主观上较大的提高.而我们通常的视频后处理技术会采用开源的项目 ...
- robotframework实战二---Jenkins连用
1.下载插件robot Jenkins环境搭建就不用说了,网上有很多帖子,你在使用时,你需要做以下几步 因为目前我已经安装了 2.新建项目 因为有重名的项目,所以会提示以下内容 你需要配置的内容就两处 ...
- bzoj3882 [Wc2015]K小割
Description Input Output Sample Input 3 3 1 3 100 1 2 3 2 3 4 1 3 5 Sample Output 8 9 12 -1 正解:暴搜+ ...
- ios 逆向工程文档汇总
iOS逆向工程工具集 http://www.jianshu.com/p/7f9511d48e05 移动App入侵与逆向破解技术-iOS篇 http://blog.csdn.net/heiby/arti ...
- Uva 10806 来回最短路,不重复,MCMF
题目链接:https://uva.onlinejudge.org/external/108/10806.pdf 题意:无向图,从1到n来回的最短路,不走重复路. 分析:可以考虑为1到n的流量为2时的最 ...