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 的柱状图 填充色为透明相关推荐

  1. R语言ggplot2可视化改变柱状图(条形图)的填充色实战:默认的颜色为灰色、改变柱状图(条形图)的填充色、设置每个柱子(条形)使用不同的色彩

    R语言ggplot2可视化改变柱状图(条形图)的填充色实战:默认的颜色为灰色.改变柱状图(条形图)的填充色.设置每个柱子(条形)使用不同的色彩 目录

  2. echarts折线图 - 区域图 -如何设置填充色

    option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat ...

  3. Echarts常用柱状图

    最近做可视化比较多,就常用的图表类型做了一下总结. 因为做可视化的图表代码量非常大,所以会把echarts图表单独抽离出来,封装成一个组件,也可以复用,所以这里我直接把封装的组件直接放在这里,是可以直 ...

  4. Vue + ECharts 象形柱状图 pictorialBar

    前言:由于公司可视化数字大屏项目需要用到了象形柱状图,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈 话不多说,直接先上效果图: 创建一个vue组件,我这里由于项目取名为:departmen ...

  5. 前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图

    Vue接入Echarts 显示柱状图饼图 使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...

  6. echarts,柱状图配置,legend

    ,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...

  7. vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图)

    vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档 起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...

  8. 填充图片颜色计算机,美化图表之填充图表区背景与设置图表填充色——想象力电脑应用...

    在前面的课程介绍里面,我们为大家介绍了图表的制作方法及图表元素的添加等功能.但对于图表的背景,却仍然还是一片软件默认的白色,为了使我们制作的图表更加美观,这里我们接着为大家介绍一下图表的美化方法,学会 ...

  9. R语言ggplot2可视化密度图(density plot)、改变密度图下的填充色实战

    R语言ggplot2可视化密度图(density plot).改变密度图下的填充色实战 目录 R语言ggplot2可视化密度图(density plot).改变密度图下的填充色实战

  10. Python使用matplotlib可视化发散棒棒糖图、发散棒棒糖图可以同时处理负值和正值、并按照大小排序区分数据、为发散棒棒糖图的特定数据点添加标签、自定义背景填充色、自定义数据点颜色

    Python使用matplotlib可视化发散棒棒糖图.发散棒棒糖图可以同时处理负值和正值.并按照大小排序区分数据.为发散棒棒糖图的特定数据点添加标签.自定义背景填充色.自定义数据点颜色(Diverg ...

最新文章

  1. Andorid SQLite数据库开发基础教程(2)
  2. C# CheckBox与RadioButton
  3. 双向循环链表的冒泡排序
  4. Bash shell 学习笔记六
  5. 【C++深度剖析教程35】函数模板的概念和意义
  6. Android ImageView的scaleType(图片比例类型)属性与adjustViewBounds(调整视图边界)属性
  7. java和网易我的世界有什么区别_网易我的世界手机版对比正版JAVA版我的世界有什么区别?...
  8. 服务器运维故障处理案例
  9. linux操作系统课程设计总结,操作系统课程设计心得+给老师的建议
  10. Python Counter函数
  11. Python京东抢购
  12. 基于Go语言Beego+Layui的OA办公系统
  13. 神马笔记 版本1.8.0——删除笔记/文件夹·技术细节篇
  14. mac终端Login Incorrect问题
  15. 习题:输入abc的值求一元二次方程的解
  16. windows系统镜像里的×64和×86有什么区别?
  17. 使用豆瓣安装python包(以numpy为例)
  18. 知云文献翻译打不开_推荐一款文献翻译软件,免费又高效的那种
  19. Dave Oracle 学习 手册 第一版 下载 说明
  20. 在项目中CR是什么意思?

热门文章

  1. 串口 单片机 文件_DIY迷你单片机学习板
  2. 数据库的锁有哪几种?语句怎么实现
  3. 【前端】vue阶段案例:组件化-房源展示
  4. c#设置导出Excel的列宽
  5. 共享资源计算机的用户名和密码,电脑共享文件为什么提示要用户名密码?
  6. 国有银行信息科技岗笔试内容
  7. 计算机桌面文件删除不掉是怎么了,小马教你桌面上文件夹删不掉 【设置方法】 的办法_...
  8. 均方值-数学期望-方差
  9. 台式机装苹果系统_苹果、华为出手,ARM取代X86芯片这也是国产CPU的巨大机会
  10. python qq机器人 发送文件_10.【代码】QQ群发机器人 - Python网络爬虫实战