2 qq 23136465 qq_23136465 于 2017.08.30 14:29 提问

ECharts仪表盘有几个效果写不出来 20C

这是我们需要的效果
图一是我们需要的效果

这是我写出来的效果
图二是实际的效果

option4 = {

series: [
    {
        name: '业务指标',
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '70%'],    // 默认全局居中
        min:0,
        max:2,
        axisLabel: {
            formatter:function(v){
                switch (v + '') {
                    case '0' : return '0';
                    case '2' : return '12000';
                }
            },
             textStyle: {
            color: "#fff",
            fontSize: 10,
            fontWeight: "bolder"
        },distance:-20
        },
    axisLine: {
        lineStyle: {
            color: [
                [0.31, "#F19149"],
                [1, "#FFFFFF"]
            ],
            width: 20
        }
    }, 
    axisTick: {
        "lineStyle": {
            "color": "#3bb4f2",
            width: 16
        },

        "length": 0,
        "splitNumber": 1
    },
    splitLine: {
        show: false
    },
    itemStyle: {
        normal: {
            "color": "#449BE2"
        }
    },
     title: {
        show: false
    },
     detail: {
            show: false
        },

// detail: {formatter:'{value}%'},
data: [{value: 0.4, name: '完成率'}]
}
]
};
这是我的配置

1个回答

aschouas
aschouas   2017.08.31 11:34

"pointer": {
"width": 10, //指针的宽度
"length": "80%", //指针长度,按照半圆半径的百分比
"color": "red"
},
然后
axisLine: {
lineStyle: {
color: [
[0.31, "#F19149"],
[1, "#FFFFFF"]
],
width: 20
}
},

    调整一下宽度就差不多了
hmszhmsz
hmszhmsz 回复qq_23136465: 绝对定位写一个透明的div盖在上边
3 个月之前 回复
qq_23136465
qq_23136465 最大的问题是两边的文字效果,这个我看了下一个例子都没有
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片