echarts函数绘图(x轴和y轴居中)

<template>
  <div id="main"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
//第一条曲线的点
function generateData() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i, i*i/10]);
  }
  return data;
}
//第二条曲线的点
function generateData1() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i, i*i/10-10]);
  }
  return data;
}
var option = {
  animation: false,
  grid: {
    top: 40,
    left: 50,
    right: 40,
    bottom: 50
  },
  tooltip: {  // Corrected from tooptip to tooltip
    trigger: 'axis',
    formatter: function(params) {
      return '<div class="box">Series 1:['+params[0].data+ ']<br/>Series 2:['+params[1].data+']</div>'
    }
  },
  legend: {
    data: ['Series 1', 'Series 2']
  },
  xAxis: {
    name: 'x',
    minorTick: {
      show: true
    },
    minorSplitLine: {
      show: true
    }
  },
  yAxis: {
    name: 'y',
    min: -100,
    max: 100,
    minorTick: {
      show: true
    },
    minorSplitLine: {
      show: true
    }
  },
  dataZoom: [
    {
      show: true,
      type: 'inside',
      filterMode: 'none',
      xAxisIndex: [0],
      startValue: -20,
      endValue: 20
    },
    {
      show: true,
      type: 'inside',
      filterMode: 'none',
      yAxisIndex: [0],
      startValue: -20,
      endValue: 20
    }
  ],
  series: [
    {
      type: 'line',
      name: 'Series 1',  // Add a name for the first series
      showSymbol: false,
      clip: true,
      data: generateData(),
    },
    {
      type: 'line',
      name: 'Series 2',  // Add a name for the second series
      showSymbol: false,
      clip: true,
      data: generateData1()
    }
  ]
};
onMounted(() => {
  // 1.基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 2.指定图表的配置项和数据
  // 3.使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
.box{
  width: 400px;
  height: 50px;
  background-color: pink;
}
</style>