echarts 柱状图添加背景色/阴影色（react）

深藏阁楼爱情的钟 2022-12-26 09:22 372阅读 0赞

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]  
barGap : ‘-100%’

就是一组颜色浅的数据

同时使用tooltip问题跳转[echarts tooltip和barGap同时使用][echarts tooltip_barGap]

series: [
        { 
            type: 'bar',
            color: 'rgba(240, 246, 253, 0.6)',
            barWidth: 32,
            barGap: '-100%', // Make series be overlap
            data: seriesData.map(() => { return formatInt(max)}),  //这组数据按需要设置百分比/阴影高度
        },{ 
            type: 'bar',
            data: seriesData,
            barWidth: 32,
            color: '#66aaff',
            borderColor: '#3ba1ff',
            borderWidth: 0,
            areaStyle: { 
                color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0, [
                    { offset: 0, color: '#fff'},
                    { offset: 1, color: '#66aaff'}
                ])
            },
        }
    ]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]: /images/20221120/642fc60edc96461e9c518f2841da35c5.png
[echarts tooltip_barGap]: https://blog.csdn.net/gd81325/article/details/110631930

发表评论取消回复

表情：

评论列表（有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts 每个柱子一种渐变色的象形柱状图

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第023个 [点击查看专栏目录][Link 1]

浅浅的花香味﹌/ 2024年03月26日 14:56/ 0 赞/ 55 阅读

相关 echarts 柱状图添加背景色/阴影色（react）

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dk

深藏阁楼爱情的钟/ 2022年12月26日 09:22/ 0 赞/ 373 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 267 阅读

相关 echarts 特殊柱状图

特殊规则柱状图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

﹏ヽ暗。殇╰゛Y/ 2022年11月27日 10:13/ 0 赞/ 199 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 614 阅读

相关 Android ListView 去除边缘阴影、选中色、拖动背景色等

去除ListView滑到顶部和底部时边缘的黑色阴影： android:fadingEdge="none" 去除拖动时默认的黑色背景： andr

小鱼儿/ 2022年08月14日 00:53/ 0 赞/ 171 阅读

相关 ECharts柱状图实例

ECharts柱状图实例 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

古城微笑少年丶/ 2022年06月14日 04:23/ 0 赞/ 298 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 328 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 286 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 704 阅读