[Vuejs]-Echarts how to set the height of y-axis

by

1👍

You can remove space around the chart by using the following grid attributes.

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

-1👍

If you are using Vue, I hope you are using the vue-echarts component.
So, in the component you would pass in props the options. You can set the "height" property in this options.
like that:

<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>

Leave a comment