javascript - 如何缩短vue-apex图表中x轴标签之间的空间
问题描述
我有一个使用 vue-apex 图表创建的简单图表,它显示了资产随时间的变化,效果很好,但是 x 轴显示我的数据的距离很远,如下所示:
如何减少 x 轴项目之间的距离,如下所示:
这是我的代码:
<template>
<div class="balance-card-container">
<div class="s">
<md-card class="balance-card">
<md-card-header>
<div class="md-title title">{{ title }}</div>
</md-card-header>
<md-card-content>
<p class="number-p">2345</p>
</md-card-content>
</md-card>
<md-card class="second-card">
<!-- <h2 class="users">Assessments summary</h2> -->
<div class="chart-wrapper">
<apexchart width="900" height="200" type="line" :options="options" :series="series"></apexchart>
</div>
</md-card>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "../variables.scss";
.balance-card {
border-radius: 14px !important;
box-shadow: 0px 6px 20px -6px rgba(221, 243, 255, 0.6) !important;
}
.title {
text-align: center;
font-family: Open Sans;
font-style: normal;
font-weight: bold !important;
font-size: 14px;
color: $casal;
}
.number-p {
text-align: center;
font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 28px;
letter-spacing: 0.25px;
color: $casal;
}
.s {
display: flex;
}
.second-card {
width: 900px !important;
}
.chart-wrapper {
width: 100%;
height: 200px;
}
</style>
<script>
export default {
name: "BalanceCard",
props: ["title"],
data() {
return {
options: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
}
},
series: [{
name: 'series-1',
data: [10000, 5000, 1000]
}]
}
}
}
</script>
解决方案
推荐阅读
- python - Apache Jena 和 Python
- javascript - 如何在 React CKEDITOR 中添加占位符
- spring - 尝试从flutter连接到spring websockets以接收广播消息时面临问题
- c# - 定时器只工作两次,c#控制台应用程序
- ios - 我想使用 foo 循环合并 2 个图像并保存在文档目录中“来自调试器的消息:由于内存问题而终止”错误
- android - Android gradle 无法解决:play-services-basement
- c# - 为什么我的异步与 ContinueWith 死锁?
- c++ - 线程关闭和程序关闭时 GetDlgItem 中的读取访问冲突
- angular - ngx-bootstrap - 没有 !important 的样式下拉菜单右?角 6
- hibernate - 在 Hibernate 分页中获取单个列值而不是实体