house/fount/components/home/HomeChart.vue

<template>
  <div id="home-chart" style="width:100%;height:400px;"></div> <!-- 定义图表容器，设置宽高 -->
</template>
<script>
export default {
  mounted() {
    this.homeChart(); // 在组件挂载完成后初始化图表
  },
  methods: {
    homeChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("home-chart")); // 获取 DOM 并初始化 ECharts 实例
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis" // 设置提示框触发方式为坐标轴触发
        },
        legend: {
          data: ["访问量", "用户量", "收入"] // 图例数据，显示三个指标
        },
        grid: {
          left: "3%", // 图表左边距
          right: "4%", // 图表右边距
          bottom: "3%", // 图表底部边距
          containLabel: true // 网格区域是否包含坐标轴标签
        },
        xAxis: {
          type: "category", // x 轴类型为类目轴
          boundaryGap: false, // 坐标轴两端不留空白
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ] // x 轴数据，表示月份
        },
        yAxis: {
          type: "value" // y 轴类型为数值轴
        },
        series: [
          {
            name: "访问量", // 数据系列名称
            type: "line", // 图表类型为折线图
            stack: "总量", // 数据堆叠，同名堆叠在一起
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230
            ] // 访问量数据
          },
          {
            name: "用户量", // 数据系列名称
            type: "line", // 图表类型为折线图
            stack: "总量", // 数据堆叠，同名堆叠在一起
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              310,
              182,
              191,
              234,
              290,
              330,
              310
            ] // 用户量数据
          },
          {
            name: "收入", // 数据系列名称
            type: "line", // 图表类型为折线图
            stack: "总量", // 数据堆叠，同名堆叠在一起
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              232,
              201,
              154,
              190,
              330,
              410
            ] // 收入数据
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option); // 设置图表配置项并渲染
      // 根据窗口的大小变动图表
      window.onresize = function() {
        myChart.resize(); // 监听窗口大小变化并调整图表尺寸
      };
    }
  }
};
</script>
<style lang="scss" scoped>
#home-chart {
  background: #ffffff; /* 设置背景颜色为白色 */
  padding: 20px 0; /* 设置上下内边距为 20px */
}
</style>