【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,可以通过文档学习了解更多的内容。十分感谢前辈们的整理与分享!

相关推荐
Dragon Wu4 小时前
前端项目架构 项目格式化规范篇
前端·javascript·react.js·前端框架
QQ 31316378904 小时前
文华财经软件指标公式期货买卖信号提示软件
java·前端·javascript
狂龙骄子4 小时前
svg实现蚂蚁线动画
javascript·蚂蚁线动画·蚂蚁线·虚线动画
老华带你飞4 小时前
房屋租赁管理系统|基于java+ vue房屋租赁管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
惜晨宝贝5 小时前
文件上传格式限制
前端·html5·上传测试
IT_陈寒5 小时前
Vue3性能优化实战:7个被低估的Composition API技巧让渲染提速40%
前端·人工智能·后端
颖风船5 小时前
膨胀腐蚀及底层实践,拒绝opencv,matlab等方式
前端·opencv·matlab
俩毛豆5 小时前
【毛豆工具集】【文件】【目录操作】生成沙盒目录
前端·javascript·鸿蒙
霁月的小屋5 小时前
从Vue3与Vite的区别切入:详解Props校验与组件实例
开发语言·前端·javascript·vue.js