echarts柱状图渐变色并且显示数据及柱状图的宽度调整
series: [{
type: 'bar',
name: '起飞',
barWidth: '20px', //柱状图的宽度
itemStyle: {
normal: { //显示渐变色颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#09c9c5' },
{ offset: 1, color: '#003791' }
]),
},
},
label: {
show: true,
position: 'top', //柱状图上带数值
textstyle: {
color: '#09c9c5',
fontSize: 12,
}
}
}, {
type: 'bar',
name: '降落',
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#c9c209' },
{ offset: 1, color: '#4d3f00' }
]),
}
},
label: {
show: true,
position: 'top', //柱状图上带数值
textstyle: {
color: '#c9c209',
fontSize: 12,
}
}
}]
一。柱状图的宽度调整: barWidth: '20px',
二。柱状图的渐变色设置:
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#09c9c5' },
{ offset: 1, color: '#003791' }
]),
三。柱状图上带数据:
label: {
show: true,
position: 'top', //柱状图上带数值
textstyle: {
color: '#09c9c5',
fontSize: 12,
}
}
效果图如下:

1、春暖花会开!如果你曾经历过冬天,那么你就会有春色!如果你有着信念,那么春天一定会遥远;如果你正在付出,那么总有一天你会拥有花开满圆。
2、当悲伤的水流入稳重的山,水这可怜儿的悲伤也勾起了山的悲伤,于是他们的心一起碎了;水把头埋入地下,山却把心的碎片一块块收好。于是就有了迷乱复杂的溶洞,就有了千姿百态的石笋,就有了洞口突突的泉水。
echarts柱状图渐变色并且显示数据及柱状图的宽度调整的更多相关文章
- Django工程中使用echarts怎么循环遍历显示数据
前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...
- echarts y轴,显示数据,但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
- echarts在一个折线/柱状图浮窗显示多条数据
解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值.1.来看数据格式 data: ...
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts折柱混合(图表数据与x轴对应显示)
一天24个小时,每个小时不一定都有对应的数据,所以后台给出的数据,只有每个时间点对应的数据,比如4点,给的是112,5点的242,其他时间没有,则只显示4点,5点时候的数据,那么现在对应的时间点就是后 ...
- Java读取数据库数据生成柱状图
此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是 此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...
- Echarts饼图更改颜色、显示数据且换行
var option = { title : { text: '数据来源', x:'center' }, tooltip : { trigger: 'i ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
随机推荐
- Linux下多线程创建
1.pthread_create Linux中线程创建用pthread_create函数 #include <pthread.h> int pthread_create( pthread_ ...
- JavaWeb505错误,IDEA版问题解决
问题描述: 在学习JavaWeb的过程中,使用JSP文件转至servlet文件的过程中,发现无论如何都无法打开文件 JSP文件代码 <%@page contentType="text/ ...
- POJ3417 Network暗的连锁 (树上差分)
树上的边差分,x++,y++,lca(x,y)-=2. m条边可以看做将树上的一部分边覆盖,就用差分,x=1,表示x与fa(x)之间的边被覆盖一次,m次处理后跑一遍dfs统计子树和,每个节点子树和va ...
- 没有使用IaC的DevOps系统都是耍流氓
作为现代软件工程的基础实践,基础设施即代码(Infrastructure as Code, IaC)是云原生.容器.微服务以及DevOps背后的底层逻辑.应该说,以上所有这些技术或者实践都是以基础设施 ...
- vulnhub靶场之THALES: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:THALES: 1,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnhub.com/th ...
- C++智能指针的enable_shared_from_this和shared_from_this机制
前言 之前学习muduo网络库的时候,看到作者陈硕用到了enable_shared_from_this和shared_from_this,一直对此概念是一个模糊的认识,隐约记着这个机制是在计数器智能指 ...
- 深度学习环境搭建常用网址、conda/pip命令行整理(pytorch、paddlepaddle等环境搭建)
前言:最近研究深度学习,安装了好多环境,记录一下,方便后续查阅. 1. Anaconda软件安装 1.1 Anaconda Anaconda是一个用于科学计算的Python发行版,支持Linux.Ma ...
- ahk精简自用
;9:03 2022/8/20 自用 #NoEnv #Warn #SingleInstance Force ;设工作目录为桌面 SetWorkingDir %A_Desktop% ;托盘提示必须放在热 ...
- 【k8s连载系列】2. k8s整体架构
# 一.Kubernetes的整体架构 学习k8s,最终目的是为了部署应用,部署一个完整的k8s, 就要知道k8s的组成.k8s主要包含两大部分: 中间包含三个绿色包的是master服务器. 下面是n ...
- jquery实现复选框的全选与取消全选功能
HTML代码 首先创建一个表格: <table class="table table-bordered table-hover"> <tr> <th& ...