Echarts 有关仪表盘轴线不显示,只显示刻度并且有渐变色。

1,需求:需要仪表盘只显示刻度并且有渐变色效果。

2,试过很多只需要几步就可以显示:

(1),首先就必须把width设置成0;

(2),对分割线,刻度线的color设置成auto;

3,话不多说,直接上代码:

 var option = {

            title: {  //标题组件

                text: '80%',

                subtext: '',

                itemGap: 150,//上下标题间距

                textStyle: {

                    color: '#fff',  //文字颜色

                    fontStyle: 'normal',  //字体风格:'normal','italic','oblique'

                    fontWeight: 'bold', //字体粗细 :'normal','bold','bolder','lighter',100 | 200 | 300 | 400...//字体系列: 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

                    fontSize: 82, //字体大小

                },

                subtextStyle: {

                    color: '#fff',  //文字颜色

                    fontStyle: 'normal',  //字体风格:'normal','italic','oblique'

                    fontFamily: 'PingFang SC-Bold, PingFang SC',//字体系列: 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

                    fontSize: 24, //字体大小

                },

                x: 'center',//设置标题居中

                // y:'center',

                bottom: 10,

            },

            tooltip: {

                formatter: "{a} <br/>{b} : {c}"

            },

            series: [

                {

                    name: '业务指标',

                    type: 'gauge',

                    detail: { formatter: '{value}' }, //仪表盘显示数据

                    axisLine: { //仪表盘轴线样式

                        show: true,

                        lineStyle: {

                            width: 0,

                            color: [[0.3, 'rgb(26,143,255)'],[0.5, 'rgb(23,151,255)'],[0.7, 'rgb(13,213,253)'],[0.8, 'rgb(9,237,253)'],[1, 'rgb(70,100,144)']],

                            // opacity: 0.6, //盘的颜色变成透明

                        }

                    },

                    axisLabel: {

                        show: false,

                        lineStyle: {

                            width: 20,

                            color: 'auto'

                            // color: [[0.8, '#0066FF'], [1, '#E6EBF8']],

                            // opacity: 0.4, //盘的颜色变成透明

                        }

                    },

                    splitLine: { //分割线样式,是大分割线

                        show: true,

                        length: 20,

                        // 距离线的位置

                        //   distance: 0,

                        lineStyle: {

                            color: 'auto',

                            width: 5,

                            // color: [[0.8, '#0066FF'], [1, '#E6EBF8']],

                            opacity: 1,

                        }

                    },

                    // 刻度线

                    axisTick: {

                        show: true,

                        length: 20,

                        splitNumber: 5,  // 每个分割线内的刻度线分为5份

                        lineStyle: {

                            color: 'auto',

                            width: 5,

                            opacity: 1,

                        }

                    },

                    // data: [{ value: '80' }],

                    markPoint: {

                        show:false,

                        symbol: 'circle',

                        symbolSize: 0,

                        data: [

                            //跟你的仪表盘的中心位置对应上,颜色可以和画板底色一样

                            { value: '', x: 'center', y: 'center', itemStyle: { color: '#fff' } }

                        ],

                        itemStyle: {

                            normal: {

                                label: {

                                    show: true,

                                    color: '#FFF',//气泡中字体颜色

                                    fontSize: 0

                                }

                            }

                        },

                    },

                    detail: {               // 仪表盘详情,用于显示数据。(仪表盘的数值字体样式和显示位置)

                        show: true,             // 是否显示详情,默认 true。

                        offsetCenter: [0, 0],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。

                        color: "#fff",          // 文字的颜色,默认 auto。

                        fontSize: 10,           // 文字的字体大小,默认 15。

                        formatter: "{value}",  // 格式化函数或者字符串

                    },

                    pointer: {              // 仪表盘指针。

                        show: false,             // 是否显示指针,默认 true。

                        length: "60%",          // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。

                        width: 15,               // 指针宽度,默认 8。

                    },

                    itemStyle: {            // 仪表盘指针样式。

                        color: "#0066FF",          // 指针颜色,默认(auto)取数值所在的区间的颜色

                        opacity: 1,             // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

                        borderWidth: 0,         // 描边线宽,默认 0。为 0 时无描边。

                        borderType: "solid",    // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。

                        borderColor: "#fff",    // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。

                        // shadowBlur: 10,         // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

                        shadowColor: "#fff",    // 阴影颜色。支持的格式同color。

                    },

                }

            ]

        };

       

猜你喜欢

转载自blog.csdn.net/zhh_5/article/details/127411280