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:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
随机推荐
- 《HelloGitHub》第 78 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
- Node.js(六)MongoDB
student.js var express = require('express'); var router = express.Router(); const _=require("lo ...
- POJ1741 tree (点分治模板)
题目大意: 给一棵有 n 个顶点的树,每条边都有一个长度(小于 1001 的正整数).定义 dist(u,v)=节点 u 和 v 之间的最小距离.给定一个整数 k,对于每一对 (u,v) 顶点当且仅当 ...
- Vu3.x如何给v-for循环出来的输入框绑定v-mode的值,以及实现父子组件传值、双向绑定
观前须知:本人演示使用的input是自己手敲的,如果使用的是element-ui等表单组建的input框请选择性参考,不保证我的方法对你们也完全有效. 父组件代码: 这里我的MiniInput是以组件 ...
- 【pytest官方文档】解读- 插件开发之hooks 函数(钩子)
上一节讲到如何安装和使用第三方插件,用法很简单.接下来解读下如何自己开发pytest插件. 但是,由于一个插件包含一个或多个钩子函数开发而来,所以在具体开发插件之前还需要先学习hooks函数. 一.什 ...
- 『现学现忘』Git后悔药 — 33、revert撤销(二)
目录 4.一次移除某几次提交 (1)git revert移除某几次提交的修改 (2)git revert 移除某几次连续的提交的修改 5.revert命令常用参数 6.git revert和git r ...
- day46-JDBC和连接池02
JDBC和连接池02 3.ResultSet[结果集] 基本介绍 表示数据库结果集的数据表,通常通过执行查询数据库的语句生成 ResultSet对象保持一个光标指向其当前的数据行,最初,光标位于第一行 ...
- OCI runtime exec failed: exec failed: unable to start container process: exec: "mongo": executable file not found in $PATH: unknown
前言: 今天按照以往在Docker安装MongoDB的方式安装,但是到最后使用mongo命令执行mongodb命令的时候一直执行不成功,最后还是按照官网的Issues解决了. 创建并运行一个Mongo ...
- VUE v-model 语法糖
v-model 语法糖 描述:弹出利用v-model语法糖 父组件 子组件
- 现代 CSS 指南 -- at-rule 规则扫盲
大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...