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

相关推荐
求道於盲3 分钟前
python中的抽象类
前端
Csvn13 分钟前
CSS 层叠与现代布局:BFC、@layer 与 grid/flex 的取舍
前端
CodeSheep23 分钟前
OpenJDK 全面禁止 AI 生成代码!
前端·后端·程序员
IT_陈寒1 小时前
为什么我的Vue组件总是莫名其妙重渲染?
前端·人工智能·后端
乘风gg1 小时前
企业级 AI Coding 的 Harness 工程实战:8 个 Skill 串起全链路
前端·ai编程·claude
染指11103 小时前
103.RAG-LLamaIndex后端rag问答-聊天接口
前端·javascript·vue.js·人工智能
东风破_10 小时前
danci 项目(三):从 JSON 数据到 AI Coding,真实项目里的数据清洗、Prompt 和工程规范
前端·后端·node.js
东风破_10 小时前
danci 项目(一):从需求到架构,一个单词学习系统为什么会这样设计
前端·后端·node.js
蒲公英eric11 小时前
从客户端到服务端:DVWA DOM 型 XSS 模块完整漏洞分析教程
前端·web安全·ai·xss·dvwa·ai安全
单线程_0111 小时前
从案例分析 Vue3 Tokenizer+Parser 源码三
前端·javascript·vue.js