vue项目中使用echarts

<template>
<div>
    <!--人数-->
    <div id="myEchart" ref="myEchart"></div>
</div>
</template>

<script>
import echarts from "echarts";
import { test } from "service";
export default {
  name: "echartsPeopleNum",
  props: {},
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.initChart();
  },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return;
  //   }
  //   this.chart.dispose();
  //   this.chart = null;
  // },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.myEchart);
      this.myChart.setOption({
        title: {
          text: "本校分数段分布",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
          },
          subtext: "人数",
          // left:'2%'
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: ["意向", "预购", "成交"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐标 轴线
              // show: false, //是否显示坐标轴轴线
              lineStyle:{
                color:'#af8ccb',
                width:3
              },
            },
            axisLabel:{
              textStyle:{
                color:'#999'
              }
            },
            axisTick: {
              show: false
            },
            data: [
              "10-15",
              "10-16",
              "10-17",
              "10-18",
              "10-19",
              "10-20",
              "10-21"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: { show: false }, //去除网格线
            // max: 100,
            // min: 0,
            // boundaryGap: [0.1, 0.2],
            axisLine: {
              //坐标 轴线
              show: false, //是否显示坐标轴轴线
            },
            axisLabel:{
              textStyle:{
                color:'#999'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        grid:{
          x:'4%'
        },
        series: [
          {
            // name: "成交",
            color: "#eef3fd",
            symbol: "none",
            type: "line",
            smooth: true,
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: [0, 17, 3, 2, 2, 3,1]
          }
        ],
        lineStyle: {
          color: "#9bb9f4"
        }
      });
      //echarts自适应
      window.addEventListener("resize", () => {
        // console.log(this);
        this.myChart.resize();
      });
    }
  },
  watch: {}
};
</script>

<style lang="less" scoped>
#myEchart{
  width: 100%;
  height: 400px;
  box-sizing: border-box;
}
</style>