echarts 的柱状图 填充色为透明
itemStyle控制柱形的样式。如下:
itemStyle: {
normal: {
color: '#fff', //填充色
barBorderColor: '#4876FF', //边框色
barBorderWidth: 3, //边框宽度
barBorderRadius:2, //圆角半径
label : { //标签显示位置
show: true,
position: 'top' //insideTop 或者横向的 insideLeft
}
}
}
例子:
option = {
title : {
text: '世界人口总量',
subtext: '数据来自网络'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['2011年', '2012年']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
}
],
series : [
{
name:'2011年',
type:'bar',
itemStyle: {
normal: {
color: '#fff',
barBorderColor: '#4876FF',
barBorderWidth: 3,
barBorderRadius:2,
label : {
show: true,
position: 'insideLeft'
}
}
},
data:[18203, 23489, 29034, 104970, 131744, 630230]
},
{
name:'2012年',
type:'bar',
itemStyle: {
normal: {
color: '#fff',
barBorderColor: '#4876FF',
barBorderWidth: 3,
barBorderRadius:2,
label : {
show: true,
position: 'top'
}
}
},
data:[19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
转载于:https://www.cnblogs.com/IT-shen/p/4244086.html
echarts 的柱状图 填充色为透明相关推荐
- R语言ggplot2可视化改变柱状图(条形图)的填充色实战:默认的颜色为灰色、改变柱状图(条形图)的填充色、设置每个柱子(条形)使用不同的色彩
R语言ggplot2可视化改变柱状图(条形图)的填充色实战:默认的颜色为灰色.改变柱状图(条形图)的填充色.设置每个柱子(条形)使用不同的色彩 目录
- echarts折线图 - 区域图 -如何设置填充色
option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat ...
- Echarts常用柱状图
最近做可视化比较多,就常用的图表类型做了一下总结. 因为做可视化的图表代码量非常大,所以会把echarts图表单独抽离出来,封装成一个组件,也可以复用,所以这里我直接把封装的组件直接放在这里,是可以直 ...
- Vue + ECharts 象形柱状图 pictorialBar
前言:由于公司可视化数字大屏项目需要用到了象形柱状图,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈 话不多说,直接先上效果图: 创建一个vue组件,我这里由于项目取名为:departmen ...
- 前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图 使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
- echarts,柱状图配置,legend
,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...
- vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图)
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档 起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
- 填充图片颜色计算机,美化图表之填充图表区背景与设置图表填充色——想象力电脑应用...
在前面的课程介绍里面,我们为大家介绍了图表的制作方法及图表元素的添加等功能.但对于图表的背景,却仍然还是一片软件默认的白色,为了使我们制作的图表更加美观,这里我们接着为大家介绍一下图表的美化方法,学会 ...
- R语言ggplot2可视化密度图(density plot)、改变密度图下的填充色实战
R语言ggplot2可视化密度图(density plot).改变密度图下的填充色实战 目录 R语言ggplot2可视化密度图(density plot).改变密度图下的填充色实战
- Python使用matplotlib可视化发散棒棒糖图、发散棒棒糖图可以同时处理负值和正值、并按照大小排序区分数据、为发散棒棒糖图的特定数据点添加标签、自定义背景填充色、自定义数据点颜色
Python使用matplotlib可视化发散棒棒糖图.发散棒棒糖图可以同时处理负值和正值.并按照大小排序区分数据.为发散棒棒糖图的特定数据点添加标签.自定义背景填充色.自定义数据点颜色(Diverg ...
最新文章
- Andorid SQLite数据库开发基础教程(2)
- C# CheckBox与RadioButton
- 双向循环链表的冒泡排序
- Bash shell 学习笔记六
- 【C++深度剖析教程35】函数模板的概念和意义
- Android ImageView的scaleType(图片比例类型)属性与adjustViewBounds(调整视图边界)属性
- java和网易我的世界有什么区别_网易我的世界手机版对比正版JAVA版我的世界有什么区别?...
- 服务器运维故障处理案例
- linux操作系统课程设计总结,操作系统课程设计心得+给老师的建议
- Python Counter函数
- Python京东抢购
- 基于Go语言Beego+Layui的OA办公系统
- 神马笔记 版本1.8.0——删除笔记/文件夹·技术细节篇
- mac终端Login Incorrect问题
- 习题:输入abc的值求一元二次方程的解
- windows系统镜像里的×64和×86有什么区别?
- 使用豆瓣安装python包(以numpy为例)
- 知云文献翻译打不开_推荐一款文献翻译软件,免费又高效的那种
- Dave Oracle 学习 手册 第一版 下载 说明
- 在项目中CR是什么意思?
热门文章
- 串口 单片机 文件_DIY迷你单片机学习板
- 数据库的锁有哪几种?语句怎么实现
- 【前端】vue阶段案例:组件化-房源展示
- c#设置导出Excel的列宽
- 共享资源计算机的用户名和密码,电脑共享文件为什么提示要用户名密码?
- 国有银行信息科技岗笔试内容
- 计算机桌面文件删除不掉是怎么了,小马教你桌面上文件夹删不掉
【设置方法】
的办法_...
- 均方值-数学期望-方差
- 台式机装苹果系统_苹果、华为出手,ARM取代X86芯片这也是国产CPU的巨大机会
- python qq机器人 发送文件_10.【代码】QQ群发机器人 - Python网络爬虫实战