echarts3 如何设置仪表盘上的文字旋转

目前做出的效果为:

clipboard.png

ui给出的效果图如下:

clipboard.png

核心代码:

var option = {
                series: [
                    {
                        name: "市民健康业务域",
                        type: "gauge",
                        center: ["50%", "50%"], // 默认全局居中
                        radius: "94%",
                        axisLine: {
                            show: false,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [0.63, "#ffd71a"],
                                    [1, "#494c3b"]
                                ],
                                width: 5
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter : "{score|{value}}\n{name|健康指数}",
                            offsetCenter: [0, "5%"],
                            rich : {
                                score : {
                                    color : "#ffd71a",
                                    fontFamily : "微软雅黑",
                                    fontSize : 32
                                },
                                name : {
                                    height : 25,
                                    color : "#526680",
                                    fontFamily : "微软雅黑",
                                    fontSize : 14
                                }
                            }
                        },
                        data: [{
                            value: 80,
                            label: {
                                textStyle: {
                                    fontSize: 12
                                }
                            }
                        }]
                    },
                    {
                        type : "gauge",
                        center: ["50%", "50%"], // 默认全局居中
                        radius : "83%",
                        axisLine : {
                            show : true,
                            lineStyle : { // 属性lineStyle控制线条样式
                                color : [
                                    [ 0.1,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 1,
                                        color: "rgba(59, 71, 82, 0)" // 0% 处的颜色
                                    }, {
                                        offset: 0,
                                        color: "rgba(59, 71, 82, 0.5)" // 100% 处的颜色
                                    }], false) ],
                                    [ 0.9, "rgba(59, 71, 82, 0.5)" ],
                                    [ 1,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 1,
                                        color: "rgba(59, 71, 82, 0.5)" // 0% 处的颜色
                                    },
                                        {
                                            offset: 0.8,
                                            color: "rgba(59, 71, 82, 0.3)" // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.5,
                                            color: "rgba(59, 71, 82, 0.2)" // 0% 处的颜色
                                        },
                                        {
                                            offset: 0,
                                            color: "rgba(59, 71, 82, 0)" // 100% 处的颜色
                                        }], false) ]
                                ],
                                width : 18
                            }
                        },
                        splitLine : {
                            show : false,
                            length : 2
                        },
                        axisTick : {
                            show : false
                        },
                        axisLabel : {
                            formatter : function ( e ) {
                                if ( e == 0 || e == 100 ) {
                                    return "";
                                }
                                return e;
                            },
                            color : "#c2b6b6",
                            fontFamily : "Arial",
                            distance : 0
                        },
                        pointer : {
                            show : false
                        },
                        detail : {
                            show : false
                        }
                    }
                ]
            };

请问仪表盘上的文字要怎么才能让其旋转呢?
试过rolate 并没有效果
谢谢

阅读 7.2k
1 个回答

目前Echarts在仪表盘还不支持这种文字的旋转,不过你可以换另一种方式,用html标签加+css3可以做到的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题