Echarts 图表向上移动：使用 CSS 调整画布位置

<template>
  <div ref="main" style="width: 100%; height: 120%; margin-left: 2%;">
    <canvas id="chartCanvas"></canvas>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const main = ref(null);

onMounted(() => {
  const myChart = echarts.init(document.getElementById('chartCanvas'));
  const option = {
    xAxis: {
      type: 'category',
      data: ['航行工况', '雷达发射工况', '低速测量工程', '海泊工况', '停泊工况'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  };
  option && myChart.setOption(option);
});
</script>
<style scoped>
#chartCanvas {
  top: -50px !important;
}
</style>
<p>要使画布向上移动一段距离，可以在 canvas 的样式中设置 top 属性为负值。在这个例子中，我们将 canvas 元素的 id 设置为 'chartCanvas'，并在样式中使用该 id 选择器来设置 top 属性为 -50px。这将使画布向上移动 50 个像素。请注意，<code>!important</code> 用于覆盖可能存在的其他样式规则。</p>