修改下列代码template div class=title h1学习时长统计h1 div div ref=chart style=height 400px; class=MyChartdivtemplatescriptimport as echarts from echarts;export default nameMyGoal mounted 通过ref获取div

<template>
  <div class="title">
    <h1>学习时长统计</h1>
  </div>
  <div ref="chart" style="height: 400px;" class="my-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'MyGoal',
  mounted() {
    // 通过ref获取div元素
    const chartDom = this.$refs.chart;
    // 初始化echarts实例
    const chartInstance = echarts.init(chartDom);
    // 设置图表配置项和数据
    const option = {
      title: {
        text: '学习时长统计'
      },
      tooltip: {},
      legend: {
        data: ['学习时长']
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '学习时长',
          type: 'bar',
          data: [2, 4, 3, 5, 6, 4, 7]
        }
      ]
    };
    chartInstance.setOption(option);
  }
};
</script>
<style scoped>
.title {
  text-align: center;
  border-bottom: 2px solid black;
}
.my-chart {
  border: 2px solid white;
  margin-top: 150px;
  margin-left: 150px;
  width: 80%;
}
</style>