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

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

方式如下:

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 //文字离表盘的距离
                  },
                }
            ]
        }),
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 是一个基于 JavaScript 的开源可视化库,用于构建交互式的图表和数据可视化界面。ECharts 提供了丰富的图表类型和灵活的配置选项,可以满足各种数据可视化需求。 在 ECharts 仪表盘(Gauge)是一种常用的图表类型,用于展示某个指标的实时数值,并通过颜色渐变来表示不同的数值范围。要实现仪表盘颜色渐变,可以通过以下步骤进行配置: 1. 定义仪表盘颜色范围: 在 ECharts 的配置项,可以通过 `color` 属性定义仪表盘颜色范围。可以使用数组来指定多个颜色,每个颜色对应一个数值范围。例如: ``` color: ['#FF4500', '#FFA500', '#32CD32'] ``` 上述代码定义了三个颜色,分别对应数值范围从低到高。 2. 配置仪表盘的指针和刻度线颜色: 通过 `axisLine` 属性可以配置仪表盘的指针和刻度线的样式。可以通过 `lineStyle` 属性设置颜色。例如: ``` axisLine: { lineStyle: { color: [[0.2, '#FF4500'], [0.8, '#FFA500'], [1, '#32CD32']] } } ``` 上述代码定义了三个颜色,分别对应数值范围从低到高,并且可以通过设置不同的比例来控制颜色的渐变。 3. 配置仪表盘的指示器颜色: 通过 `pointer` 属性可以配置仪表盘的指示器的样式。可以通过 `itemStyle` 属性设置颜色。例如: ``` pointer: { itemStyle: { color: 'auto' } } ``` 上述代码的 `'auto'` 表示使用自动计算的颜色,可以根据当前数值和颜色范围进行渐变。 以上是实现 ECharts 仪表盘颜色渐变的基本配置方法。根据具体需求,还可以进一步调整其他样式属性,如背景颜色、字体颜色等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值