Echarts仪盘表axisLine渐变及title颜色设置

在这里插入图片描述

option = {
    backgroundColor: '#1092f5',
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [{
        name: '业务指标',
        type: 'gauge',
        axisLabel: {
            color: '#fff'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: [
                    [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0.1,
                            color: "#0bacff"
                        },
                        {
                            offset: 0.6,
                            color: "#2089cf"
                        },
                        {
                            offset: 1,
                            color: "#0169ec"
                        }
                    ])]
                ]

            }
        },
        splitLine: {
            lineStyle: {
                color: "#eee"
            }
        },
        detail: {
            color: '#fff',
            formatter: '{value}%',
        },
        title: { //设置仪表盘中间显示文字样式
            textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                color: "white"
            }

        },
        data: [{
            value: 70,
            name: '完成率'
        }]
    }]
};

Done!

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 ECharts 仪表盘(Gauge)的 axisLine设置渐变色,可以使用 LinearGradient 渐变对象,并将其作为 axisLine.lineStyle.color 的值。例如: ```javascript option = { series: [{ type: 'gauge', // 其他配置项... axisLine: { lineStyle: { width: 10, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#00ff00' }, { offset: 0.5, color: '#ffff00' }, { offset: 1, color: '#ff0000' }]) } }, // 其他配置项... }] }; ``` 在以上配置中,我们使用了 LinearGradient 渐变对象,并将其作为 axisLine.lineStyle.color 的值。LinearGradient 的构造函数的参数分别是起始点的 x 坐标、y 坐标、终止点的 x 坐标、y 坐标,以及渐变颜色数组。颜色数组中,每个元素都是一个对象,包含 offset 和 color 两个属性,分别表示颜色渐变中的位置(0 到 1 之间的值)和对应的颜色。 需要注意的是,以上配置中的 echarts.graphic 是 ECharts 中的图形绘制模块,需要在代码中引入。例如: ```javascript import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/gauge'; import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/toolbox'; import 'echarts/lib/component/dataZoom'; import 'echarts/lib/component/markLine'; import 'echarts/lib/component/markArea'; import 'echarts/lib/component/markPoint'; import 'echarts/lib/component/grid'; import 'echarts/lib/component/visualMap'; import 'echarts/lib/component/geo'; import 'echarts/lib/component/calendar'; import 'echarts/lib/component/dataset'; import 'echarts/lib/component/axisPointer'; import 'echarts/lib/component/polar'; import 'echarts/lib/component/parallel'; import 'echarts/lib/component/singleAxis'; import 'echarts/lib/component/brush'; import 'echarts/lib/component/magicType'; import 'echarts/lib/component/graphic'; import 'echarts/lib/component/calendar'; ``` 需要根据实际需要引入的组件进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏刻有时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值