Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案

Stella981
• 阅读 360

Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
重点代码

itemStyle: {
   
   
   
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
   
   
   
                    offset: 0,
                    color: '#C70019'

                }, {
   
   
   
                    offset: 0.5,
                    color: '#EB354C'

                }, {
   
   
   
                    offset: 1,
                    color: '#C70019'

                }]),
                barBorderRadius: [20, 20, 0, 0],
                borderWidth: 0,
                borderColor: '#333',
            }

Done!

本文同步分享在 博客“漏刻有时”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
Stella981 Stella981
2年前
Docker系列之MySQL安装教程
Docker系列之MySQL安装教程!在这里插入图片描述(https://oscimg.oschina.net/oscnet/up290e6ea2ceb61c35d155a02d468e92e5.png)有了前面的基础教程Docker系列之常用命令操作手册(https://www.oschina.net/action/GoToLink?
Stella981 Stella981
2年前
CococsCreator 常用UI组件(Canvas、Widget、Button、Layout、EditBox、RichText、ScrollView)(第十三篇)
一、Canvas组件这个Canvas组件在前面篇章有讲过的。!在这里插入图片描述(https://oscimg.oschina.net/oscnet/up7e35da59f73f899db7689319ddd07379.png)属性说明DesignResolution设计分辨率(内容生产者在制作场景时使
Stella981 Stella981
2年前
Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图!(https://oscimg.oschina.net/oscnet/d7e04daefbe994516a605f1d19dc5909504.png)直接上
Wesley13 Wesley13
2年前
Java实现简单计算器
1概述JavaAWTSwing实现的简单计算器,功能如下:支持加减乘除支持小数运算键盘监听鼠标监听2效果演示!在这里插入图片描述(https://imgblog.csdnimg.cn/20201216012859251.gif)!在这里插入图片描述(htt
Stella981 Stella981
2年前
Flutter 使用Android Studio 创建第一个应用
Flutter使用AndroidStudio创建第一个应用1创建应用!在这里插入图片描述(https://oscimg.oschina.net/oscnet/up9ecc5b3e45c9c29188c11613841f0917.png)2选择Flutterapplication!在这里插入图
Stella981 Stella981
2年前
Chrome超好用的Json视图工具
效果图!在这里插入图片描述(https://oscimg.oschina.net/oscnet/up8f5456d4087d42c39121d14af1155a82.png)Jsonview插件下载安装①下载:你可以从chrome应用商店里找到Jsonview插件,如果你的chrome应用商店无法打开,
Stella981 Stella981
2年前
H5+css特效源代码分享:发光分享按钮
H5css特效源代码分享效果图:背景光效可以根据使用自己调!在这里插入图片描述(https://imgblog.csdnimg.cn/20201024202227228.png?xossprocessimage/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR
Wesley13 Wesley13
2年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Stella981 Stella981
2年前
IDEA实用教程(十一)—— 使用Maven创建JavaSE项目
1.第一步!在这里插入图片描述(https://oscimg.oschina.net/oscnet/d3e5173f0fa64c563e87c8084c6c3cd6304.png)2.第二步!在这里插入图片描述(https://oscimg.oschina.net/oscnet/b4b322d915146536a8e0c2b1942b0
Wesley13 Wesley13
2年前
5分钟实现微信云小程序支付功能(含源码)
1先上效果图!(https://imgblog.csdnimg.cn/20201223174738835.jpg)!在这里插入图片描述(https://imgblog.csdnimg.cn/2020122319430613.jpgpic_center)快速实现支付功能,有多快?有五连鞭(https://www.o