Echarts 仪表盘 设置,样式美化

2019-04-16  本文已影响0人  喵喵同学嘛

Echarts仪表盘样式设置,美化
效果如下图:


image.png
option = {
            series: [
                {
                    name:"业务指标",
                    type: "gauge",
                    center: ["50%", "45%"], 
                    radius: "70%", //仪表大小
                    // startAngle: 200, //开始角度
                    // endAngle: -20, //结束角度
                    min:0,
                    max:1000,
                    data:[{value:950,name:"业务指标"}],
                    axisLine: {
                        show: false,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [0.5, '#FF6F90'], 
                                [0.8, '#FFB36F'], 
                                [1, '#27D9C8'], 
                            ],
                            shadowColor:"#ccc",
                            shadowBlur:25,
                            width: 20
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: { //指针样式
                        length: '60%',
                        color:"#4A90E2"
                    },
                    title:{
                        show:true,
                        offsetCenter: [0, '60%'],
                        color:'#333',
                        fontSize:12,
                        backgroundColor:"#D8d8d8",
                        borderRadius:21,
                        padding:5
                    },
                    detail: {
                      formatter : "{score|{value}}",
                      offsetCenter: [0, 0],
                      backgroundColor: '#FFF',
                      shadowColor:"#C3Cfff",
                      shadowBlur:14,
                      borderRadius:40,
                      width:38,
                      rich : {
                          score : {
                              color : "#333",
                              fontSize : 17,
                              padding:14
                          }
                      }
                  },
                },

            ]
        };
上一篇下一篇

猜你喜欢

热点阅读