ECharts仪表盘设置主题文字颜色

最新推荐文章于 2025-06-10 13:59:01 发布

原创最新推荐文章于 2025-06-10 13:59:01 发布 · 1.4w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts仪表盘使用记录

前端部分专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用eCharts配置仪表盘的样式，包括字体、分割线、指针、表盘颜色等细节调整，帮助读者掌握仪表盘图表的个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置仪表盘中显示字体样式：

方式如下：

eChartA.setOption ({
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [
                {
                    startAngle: 340, //开始角度 左侧角度
                    endAngle: 0, //结束角度 右侧
                    name: '健康值',
                    type: 'gauge',
                    detail: {
                      offsetCenter: [0,"30%"],    //设置仪表盘下方显示内容位置
                      formatter:'{value}%',
                      textStyle:{color:'white',fontSize:20},
                      },
                    title : {               //设置仪表盘中间显示文字样式
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 10,
                            fontStyle: 'italic',
                            color:"white"
                        }
                    },
                    data: [{
                      value: 60, 
                      name: '重要设备健康指数',
                    }],
                    center: ["47%", "45%"], // 默认全局居中
                    splitLine : {           //分割线样式（及10、20等长线样式）
                       length : 15,
                       lineStyle: {            // 分隔线样式。
                        color: "#eee",              //线的颜色,默认 #eee。
                        opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                        width: 2,                   //线度,默认 2。
                        type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                        shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                        shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                    }
                    },
                    pointer : { //指针样式
                      length: '80%'
                    },
                    axisLine:{
                      show : true,// 是否显示仪表盘轴线(轮廓线),默认 true。
                      lineStyle : { // 属性lineStyle控制线条样式
                        shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                        shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                          // color : [ //表盘颜色
                          //     [ 0.5, "#DA462C" ],//0-50%处的颜色
                          //   [ 0.7, "#FF9618" ],//51%-70%处的颜色
                          //   [ 0.9, "#FFED44" ],//70%-90%处的颜色
                          //   [ 1,"#20AE51" ]//90%-100%处的颜色
                          // ],
                          width : 15//表盘宽度
                      }
                  },
                  axisLabel : { //文字样式（及“10”、“20”等文字样式）
                      color : "white",
                      distance : 5 //文字离表盘的距离
                  },
                }
            ]
        }),