Question

我使用的是Echarts百度 - Gauge排行榜。结果，我得到了100分中的30分。我需要将其改为50分中的30分。这是我的代码。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<!-- ECharts import -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    // configure for module loader
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // use
    require(
        [
            'echarts',
            'echarts/chart/gauge'
        ],
        function (ec) {
            // Initialize after dom ready
            var myChart = ec.init(document.getElementById('main'));

            option = {
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name:'????',
                        type:'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        center : ['50%', '90%'],    // ??????
                        radius : 320,
                        axisLine: {            // ????
                            lineStyle: {       // ??lineStyle??????
                                width: 200
                            }
                        },
                        axisTick: {            // ??????
                            splitNumber: 10,   // ??split?????
                            length :12,        // ??length????
                        },
                        axisLabel: {           // ???????,??axis.axisLabel
                            formatter: function(v){
                                switch (v+''){
                                    case '10': return 'R';
                                    case '50': return 'A';
                                    case '90': return 'G';
                                    default: return '';
                                }
                            },
                            textStyle: {       // ??????????????,??TEXTSTYLE
                                color: '#fff',
                                fontSize: 15,
                                fontWeight: 'bolder'
                            }
                        },
                        pointer: {
                            width:50,
                            length: '90%',
                            color: 'rgba(255, 255, 255, 0.8)'
                        },
                        title : {
                            show : true,
                            offsetCenter: [0, '-60%'],       // x, y,??px
                            textStyle: {       // ??????????????,??TEXTSTYLE
                                color: '#fff',
                                fontSize: 30
                            }
                        },
                        detail : {
                            show : true,
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            borderColor: '#ccc',
                            width: 100,
                            height: 40,
                            offsetCenter: [0, -40],       // x, y,??px
                            formatter:'{value}',
                            textStyle: {       // ??????????????,??TEXTSTYLE
                                fontSize : 50
                            }
                        },
                        data:[{value: 30, name: 'Your Score'}]
                    }
                ]
            };


            // Load data into the ECharts instance
            myChart.setOption(option);
        }
    );
</script>

我是JS的新手。我试着查看他们的文档，但大多数文档都是用中文编写的。请帮帮我。提前谢谢。

Answer 1

您只需要将max属性添加到series：

series : [
    {
        name:'????',
        type:'gauge',
        max: 50,
...

英文版文档可在http://echarts.baidu.com/doc/doc-en.html#SeriesGauge获得。

如何在Echarts Baidu - Gauge Chart中将100马克减少到50马克

1 个答案: