问如何在电子海图中将100分降至50分百度仪表图
EN

Stack Overflow用户

提问于 2015-06-12 13:24:58

回答 1查看 1.5K关注 0票数 0

我使用的是Echarts百度仪表图。结果，我得到了满分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的新手。我试着看他们的文档，但大多数文档都是用中文写的。请帮帮我。提前谢谢。

echarts

baidu

回答 1

Stack Overflow用户

发布于 2015-07-27 21:24:40

您只需要在series中添加max属性

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

英文版本的文件可以在http://echarts.baidu.com/doc/doc-en.html#SeriesGauge上找到。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30795822

复制

相似问题

问如何在电子海图中将100分降至50分百度仪表图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在电子海图中将100分降至50分百度仪表图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在电子海图中将100分降至50分百度仪表图
EN