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

热门文章

最新文章