代码：
<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
区域填充样式。设置后显示成区域面积图。
-
color: 填充的颜色。
-
origin: 图形区域的起始位置
-
shadowBlur: 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
-
shadowColor: 阴影颜色。支持的格式同color。
-
shadowOffsetX: 阴影水平方向上的偏移距离。
-
shadowOffsetY: 阴影垂直方向上的偏移距离。
-
opacity: 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
