【echarts基础】在柱形图上设置文本

一、需求描述

在柱状图上设置文本标签,按需修改它的颜色、大小、边框、阴影等,如下。

二、代码展示

复制代码
series:[
           {
            name:"螺蛳粉",
            type:"bar",
            data:data.data.chartData.chartData.num.螺蛳粉,
            label:{
            //图形上显示文本标签
                formatter:"螺蛳粉",
                show:true,
                position:"inside",
                textStyle:{
                    fontWeight:"bolder",
                    fontSize:"10",//文字大小
                    color:"black",//文字颜色
                    textBorderColor:"#dbd0e6",//文字描边,颜色
                    textBorderWidth:1,//文字描边,宽度
                    textShadowColor:"#dbd0e6",//文字阴影颜色
                    textShadowBlur:2,//文字本身的阴影长度
                    textShadowOffsetX:2,//文字本身的阴影 X 偏移
                    textShadowOffsetY:1//文字本身的阴影 Y 偏移
                },                                   
                },
            stack:"total",//数据堆叠同个类目轴上系列配置相同的stack值可以堆叠放置
            //图形渐变色
            color:new $echarts.graphic.LinearGradient(0,0,0,1,[
            {
                offset:0,
                color:"#d6e9ca"
            },
            {
                offset:0.8,
                color:"rgb(128,255,165)"                                        
            }
            ])
     }
}

三、参考资料

强烈推荐官网资源https://echarts.apache.org/zh/index.html,可以通过文档学习了解更多的内容。十分感谢前辈们的整理与分享!

相关推荐
w2sfot6 分钟前
【JS加密在线】jsjiami.online(让JavaScript 更安全!)
开发语言·javascript·安全
HSunR6 分钟前
ruoyi 若依 自定义注解 参数校验
java·前端·数据库
拆房老料1 小时前
ONLYOFFICE也能像Microsoft Word和WPS一样分别设置中西文字体
前端·html·word·开源软件·wps
Solis程序员1 小时前
Stripe 幂等表:把「不确定的重试」变成「查表返回」
前端·安全·bootstrap·php·agent
李纲明2 小时前
WordPress 站点变慢:按 TTFB → 缓存 → 查询 → 前端 分层排查(含配置注意)
前端·缓存·性能优化·wordpress·后端开发
程序人生8882 小时前
PDF 转 Word 版式错乱、表格丢失?DocConverter Web 格式互转引擎的保真实践
前端·人工智能·opencv·机器学习·pdf·word
粥里有勺糖3 小时前
安利一下最近用的桌面“Agent” | T3 Code
前端·github·ai编程
xy34533 小时前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
不停喝水3 小时前
【前端转全栈java速通课】 项目实战④7-11节 操作数据库-登录-注册-修改密码-注销-mubatis-plus简化crud-
java·前端·数据库
一水鉴天4 小时前
统一对象拓扑(UOT)设计全链定稿:从三件事分离到三继承 之1 20261010(豆包“查看聊天内容”继续)
前端·css