echarts 上下空白太多如何解决?

设置了grid,还是没用
grid:{
        x:0,
        x2:0,
        y:0,
        y2:0
    }

clipboard.png

<html>
    <head>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Lobster+Two:700i" rel="stylesheet">

        <script src='https://cdn.rawgit.com/ecomfe/echarts/master/dist/echarts.js'></script>
        <script src='../dist/echarts-liquidfill.js'></script>
    </head>
    <body>
        <style>
        *{margin:0;padding:0;}
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                background: #F1F7FF;
            }

            #main {
                padding:0;
                margin:0;
            }

            #main:after {
                display: block;
                content: ' ';
                clear: both;
            }

            .chart {
                width: 200px;
                height: 200px;
                float: left;
            }

            .main-chart {
                width: 100%;
                height: 200px;
                float: none;
                margin: -50px 0;
            }

            .nav {
                text-align: center;
                margin: 10px;
            }     
        </style>
        <div id='main'>
            <div class="chart"></div>
        </div>
        
        <script>
            var bgColor = '#E3F7FF';
            var containers = document.getElementsByClassName('chart');
            var options = [{
                grid:{
                    x:0,
                    x2:0,
                    y:0,
                    y2:0
                },
                backgroundColor:'#f00',
                series: [{
                    type: 'liquidFill',
                    data: [0.8, {
                        value: 0.5,
                        direction: 'left'
                    }, 0.4, {
                        value: 0.3,
                        direction: 'left'
                    }],
                    radius: '70%',
                    outline: {
                        show: false
                    }
                }]
            }];

            var charts = [];
            for (var i = 0; i < options.length; ++i) {
                var chart = echarts.init(containers[i]);
                chart.setOption(options[i]);
                charts.push(chart);
            }

            setInterval(update, 3000);

            function update() {
                var data = [];
                var last = 1;
                for (var i = 0; i < 4; ++i) {
                    last = Math.floor(last * (Math.random() * 0.5 + 0.5)
                        * 100) / 100;
                    data.push(last);
                }
                // charts[1].setOption({
                //     series: [{
                //         data: data
                //     }]
                // });
            }
        </script>
    </body>
</html>
阅读 16.4k
2 个回答

谢邀~

如图:

clipboard.png

其实一个参数搞定了radius: '100%',还是谢谢楼上大神!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏