echarts如何设置y轴的高度答案

【问题标题】：Echarts how to set the height of y-axisecharts如何设置y轴的高度
【发布时间】：2019-09-15 07:50:54
【问题描述】：

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

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

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

【问题讨论】：

标签： vue.js charts vuejs2 echarts

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：