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

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

20200322103939805.png


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: '完成率'
        }]
    }]
};
相关文章
|
6月前
echarts 横纵分割线颜色透明度
echarts 横纵分割线颜色透明度
|
17天前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
30 2
|
14天前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
36 0
|
2月前
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
56 2
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
6月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
128 0
|
6月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
538 0
|
6月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
460 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
|
18天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
44 1