Question

我正在将Echarts用于我的vue应用程序，并坚持使用样式。该库将创建一个画布并在DOM中进行渲染。但是，我有一个要求，其中需要将图表与Visual Design线框逐像素匹配。我遇到的主要问题是设置y轴的高度。画布在图表周围有一些空间。如何删除它并设置图表的高度和宽度。

我尝试设置网格的高度和宽度，但这没有帮助。

grid: {
width: 768px,
height: 120
}

Answer 1

您可以使用以下网格属性删除图表周围的空间。

             grid: {
                  left: '0%',
                  bottom: '0%',
                  right: '0%',
                  top: '0%'}

Answer 2

如果你使用 Vue，希望你使用的是 vue-echarts 组件。因此，在组件中，您将传入 props 选项。您可以在此选项中设置“高度”属性。像这样：

<template>
  <div>
    <ECharts :options="options" />
  </div>
</template>
<script>
  import ECharts from 'vue-echarts';
  import 'echarts/lib/chart/bar';
  import 'echarts/lib/component/tooltip';
  import 'echarts/lib/component/legend';

  export default {
    name: 'ChartTest',
    components: {
      ECharts,
    },
    data() {
      return {
        options: {
          height: '120px',
          legend: {
            show: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['a', 'b', 'c'],
            },
          ],
          yAxis: [{ type: 'value' }],
          series: [
            { name: 'test', type: 'bar', data: [1, 2, 3] },
          ],
        },
      };
    },
  };
</script>

绘制如何设置y轴的高度

2 个答案: