柱状图柱子间隔和圆角及渐变色设置

效果图：

代码如下：

option = {legend: {},tooltip: {},dataset: {source: [['product', '2015', '2016', '2017'],['first', 43.3, 85.8, 93.7],['second', 83.1, 73.4, 55.1],['third', 86.4, 65.2, 82.5],['fourth', 72.4, 53.9, 39.1]]},xAxis: { type: 'category' },yAxis: {},series: [{ type: 'bar',barGap:'30%', //柱子之间的间隔itemStyle: {// 柱子显示时的颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{ offset: 0, color: '#83bff6' },{ offset: 0.5, color: '#188df0' },{ offset: 1, color: '#188df0' }]),//设置柱形图圆角 [左上角，右上角，右下角，左下角]barBorderRadius:[8, 8, 0, 0]},emphasis: {itemStyle: {// 鼠标经过时柱子的颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2378f7' },{ offset: 0.7, color: '#2378f7' },{ offset: 1, color: '#83bff6' }])}},}, { type: 'bar',color:'#FDBF5E' }, { type: 'bar',color:'#66D3AE' }]
};

柱状图柱子间隔和圆角及渐变色设置相关推荐

双柱状图柱子数量比较多_微生物组数据冲击图和柱状图一条代码解决
00. 写在前面堆叠柱状图用于表征高维数据,例如微生物群落,代谢物组成是一种常见的图表类型,所以使用的次数也非常多,理所应当被封装成函数,一键绘制. 冲击图其实添加了堆叠柱状图之间的连线,这对于柱子 ...
双柱状图柱子数量比较多_一条代码完成堆叠柱状图-冲击图的操作-终结版
Editor's Note 生统和生信分析一直是咱们投必得关注的重要内容,虽然我们现在还没有固定的编辑在写,但是也会经常转载我自己和其它几个朋友在其它公众号首发的一些相关干货,今天这篇来源于" ...
android 圆角边框边框渐变,支持边框、圆角、渐变色、透明度的GradientButton
最近在项目中发现好多Button背景颜色相同,但圆角大小不等的Button,这样就得写一大堆的shape或者selector,不便于管理及后期维护,于是乎变想能不能写一个支持边框.圆角.渐变色.透明度 ...
android 圆角边框边框渐变,Android深度定制化TabLayout：圆角，渐变色，背景边框，圆角渐变下划线，基于Android原生TabLayout...
Android深度定制化TabLayout:圆角,渐变色,背景边框,圆角渐变下划线,基于Android原生TabLayout 在附录1的基础上丰富自定义的TabLayout,这次增加两个内容: 1,当 ...
echarts柱状图柱子上方数据标签显示
echarts柱状图柱子上方数据标签显示如图开启显示,也可以修改样式.
ECharts柱条渐变色设置以及常用渐变色
ECharts柱条渐变色设置这里只展示最关键的部分. series: [{name: '销量',type: 'bar',itemStyle : {normal: {color: new echart ...
【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录一.盒子模型圆角边框二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例一.盒子模型圆角边框在 CS ...
css设置四个圆角,css怎么设置4个圆角？css设置4个圆角方法
div如何设置css圆角边框?css设置4个圆角方法有哪些?这对于刚刚入门的css新手,比较陌生,那么css怎么设置4个圆角?下面我们来看一下css设置4个圆角方法.[推荐学习:CSS3教程] CSS ...
Android textView文字渐变色设置
Android textView文字渐变色设置方式一: private void setGradientColor() {int[] colors = {Color.parseColor(" ...

柱状图柱子间隔和圆角及渐变色设置

柱状图柱子间隔和圆角及渐变色设置相关推荐

最新文章

热门文章