当我在数据系列中同时使用x和y时,无法删除图表周围的填充。
请参考以下工作密码笔:
https://codepen.io/bmecler/pen/oNNdXjQ
然后在这里我修改导致填充的数据系列:
https://codepen.io/bmecler/pen/Jjjvomp
我尝试添加以下选项:
xaxis: {
x: 0,
offsetX: 0,
offsetY: 0,
padding: {
left: 0,
right: 0
},
},
代码:
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="container">
<vue-apex-charts
type="area"
:options="chartOptions"
:series="series">
</vue-apex-charts>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
CSS:
.container {
background-color: #eee;
width: 25%;
}
JS:
new Vue({
el: "#app",
data() {
return {
chartOptions: {
grid: {
show: false,
padding: {
left: 0,
right: 0
}
},
chart: {
toolbar: {
show: false,
},
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'numeric',
lines: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
yaxis: [{
y: 0,
offsetX: 0,
offsetY: 0,
padding: {
left: 0,
right: 0
},
}],
tooltip: {
x: {
show: true,
format: 'dd/MM/yy HH:mm'
},
},
},
series: [{
name: 'series1',
data: [{"x":"Mon","y":"31"}, {"x":"Tues","y":"41"}]
}],
}
},
components: {
VueApexCharts
}
})