<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入echarts-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div style="width: 500px; height: 500px;background-color: #8ED0FF" id="container"></div>
</body>
<script>
var dom = document.getElementById("container");
var myChart= echarts.init(dom);
var option = {};
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
grid: {
top:'50%',
left: '30%',
right: '8%',
bottom: '8%',
containLabel: true
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
if (option&& typeof option === 'object') {
myChart.setOption(option);
}
</script>
</html>
在容器中通过grid属性中的数值来控制图表的位置
grid: {
top:'50%',
left: '30%',
right: '8%',
bottom: '8%',
containLabel: true
},