2

当我在数据系列中同时使用 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
  }
})
4

0 回答 0