《图解Echarts in Vue》Line实例- 基础面积图_最小值

代码：

<template>
  <div class="chart" style="height: 300px; width: 600px"></div>
</template>

<script>
export default {
  methods: {
    initChart() {
      const dom = document.querySelector(".chart");
      const chart = this.$echarts.init(dom);
      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      chart.setOption(option);
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

知识点

xAxis.bundaryGap

坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

类目轴中 ​​boundaryGap​​ 可以配置为 ​​true​​ 和 ​​false​​。默认为 ​​true​​，这时候​​刻度​​只是作为分隔线，标签和数据点都会在两个​​刻度​​之间的带(band)中间。

非类目轴，包括时间，数值，对数轴，​​boundaryGap​​​是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 ​​min​​​ 和 ​​max​​ 后无效。 ​示例：​

boundaryGap: ['20%', '20%']

series.areaStyle

区域填充样式。设置后显示成区域面积图。