美文网首页
Echarts 仪表盘 设置,样式美化

Echarts 仪表盘 设置,样式美化

作者: 喵喵同学嘛 | 来源:发表于2019-04-16 16:01 被阅读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
                              }
                          }
                      },
                    },
    
                ]
            };
    

    相关文章

      网友评论

          本文标题:Echarts 仪表盘 设置,样式美化

          本文链接:https://www.haomeiwen.com/subject/maibwqtx.html