ECharts儀表盤設置主題文字顏色

設置儀表盤中顯示字體樣式:

方式如下:

eChartA.setOption ({
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [
                {
                    startAngle: 340, //開始角度 左側角度
                    endAngle: 0, //結束角度 右側
                    name: '健康值',
                    type: 'gauge',
                    detail: {
                      offsetCenter: [0,"30%"],    //設置儀表盤下方顯示內容位置
                      formatter:'{value}%',
                      textStyle:{color:'white',fontSize:20},
                      },
                    title : {               //設置儀表盤中間顯示文字樣式
                        textStyle: {       // 其餘屬性默認使用全局文本樣式,詳見TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 10,
                            fontStyle: 'italic',
                            color:"white"
                        }
                    },
                    data: [{
                      value: 60, 
                      name: '重要設備健康指數',
                    }],
                    center: ["47%", "45%"], // 默認全局居中
                    splitLine : {           //分割線樣式(及10、20等長線樣式)
                       length : 15,
                       lineStyle: {            // 分隔線樣式。
                        color: "#eee",              //線的顏色,默認 #eee。
                        opacity: 1,                 //圖形透明度。支持從 0 到 1 的數字,爲 0 時不繪製該圖形。
                        width: 2,                   //線度,默認 2。
                        type: "solid",              //線的類型,默認 solid。 此外還有 dashed,dotted
                        shadowBlur: 10,             //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 
                        shadowColor: "#fff",        //陰影顏色。支持的格式同color。
                    }
                    },
                    pointer : { //指針樣式
                      length: '80%'
                    },
                    axisLine:{
                      show : true,// 是否顯示儀表盤軸線(輪廓線),默認 true。
                      lineStyle : { // 屬性lineStyle控制線條樣式
                        shadowBlur: 10,             //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 
                        shadowColor: "#fff",        //陰影顏色。支持的格式同color。
                          // color : [ //錶盤顏色
                          //     [ 0.5, "#DA462C" ],//0-50%處的顏色
                          //   [ 0.7, "#FF9618" ],//51%-70%處的顏色
                          //   [ 0.9, "#FFED44" ],//70%-90%處的顏色
                          //   [ 1,"#20AE51" ]//90%-100%處的顏色
                          // ],
                          width : 15//錶盤寬度
                      }
                  },
                  axisLabel : { //文字樣式(及“10”、“20”等文字樣式)
                      color : "white",
                      distance : 5 //文字離錶盤的距離
                  },
                }
            ]
        }),
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章