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 背景渐变柱状图的更多相关文章

  1. echarts 堆叠柱状图 + 渐变柱状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. echarts —— 绘制横向柱状图(圆角、无坐标轴)

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  3. CSS3魔法堂:背景渐变(Gradient)

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  4. CSS3之firefox&safari背景渐变之争 - [前端技术][转]

    Firefox浏览器下的渐变背景  Firefox3.6background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));chrome/S ...

  5. Tesseract处理背景渐变的图片

    在Tesseract处理背景渐变图片不太理想的情况下, 可以利用Pillow库, 创建一个阈值过滤器来去掉渐变的背景色, 只把文字留下来, 从而让图片更清晰, 便于Tesseract读取: from ...

  6. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  7. less常用样式集,清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。

    .clear-float() { content: ''; display: block; clear: both; height:; } //伪元素清除浮动 .after-clear() { &am ...

  8. UIView的背景渐变

    //绘制背景渐变 /* CGCradientCreateWithColorComponents函数需要四个参数: 色彩空间:(Color Space)这是一个色彩范围的容器,类型必须是CGColorS ...

  9. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

随机推荐

  1. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  2. Razor 语法糖常规用法

    1.隐匿代码表达式 例: @model.name 会将表达式的值计算并写入到响应中,输入时采用html编码方式 2.显示表达式 例:@(model.name)会将输入@model.name字符串 3. ...

  3. Java—包装类、Date和SimpleDateFormat、Calendar类

    包装类 基本数据类型不能调用方法,功能简单,为了让基本数据类型也具备对象的特性,Java为每个基本数据类型提供了一个包装类,这样就可以像操作对象那样来操作基本数据类型. 基本类型和包装类之间的对应关系 ...

  4. JavaScript 面向对象编程(三):非构造函数对象的继承

    JavaScript 面向对象编程(三):非构造函数对象的继承 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese ...

  5. mysql在控制台里出现中文问号问题

    由于重装了wampserver,之前遇到的问题统统会重新出现,那么今天遇到的是在mysql控制台中,在表里输入中文数据,却出现问号的问题: 那么这个就跟编码有关系了,那么,我们就去wampserver ...

  6. Python-Django框架学习笔记——第一课:Hello World

    Python Django 有诗云: 孤山寺北贾亭西,水面初平云脚低. 几处早莺争暖树,谁家新燕啄春泥. 乱花渐欲迷人眼,浅草才能没马蹄. 最爱湖东行不足,绿杨阴里白沙堤. 今天在信阳游玩,有幸来到信 ...

  7. 基于ASP.NET WPF技术及MVP模式实战太平人寿客户管理项目开发(Repository模式)

    亲爱的网友,我这里有套课程想和大家分享,假设对这个课程有兴趣的.能够加我的QQ2059055336和我联系.  课程背景 本课程是教授使用WPF.ADO.NET.MVVM技术来实现太平人寿保险有限公司 ...

  8. ref 微软官网

    https://docs.microsoft.com/zh-cn/previous-versions/14akc2c7(v=vs.110)

  9. kubernetes-身份与权限认证(十四)

    Kubernetes的安全框架 https://kubernetes.io/docs/reference/access-authn-authz/rbac/ •访问K8S集群的资源需要过三关:认证.鉴权 ...

  10. 【造轮子】开发vue组件库MeowMeowUI

    项目示例 github ​ 1. 创建项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue in ...