javascript - echarts 上下空白太多如何解决？
设置了grid，还是没用
grid:{
x:0,
x2:0,
y:0,
y2:0
}
<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>
<p id='main'>
<p class="chart"></p>
</p>
<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>
