Vue中Echarts的使用以及解决留白问题(boundaryGap)

1.导包 npm install echarts --save
2.用包 我是用的是局部组件 import echarts from "echarts";
3.在官方实例中找到自己需要的表格然后复制到代码中

4.坐标轴有两边留白策略,默认为true,所以我们可以把boundaryGap配置为false
代码如下

<template>
  <div class="my-root">
    <bread frist="数据统计" second="数据报表"></bread>
    <div class="box">
      <div ref="ref" class="rep"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

import { reports } from "../api/http";
export default {
   // 我们的表格要渲染上去 必须要在页面渲染完成后 
  mounted() {
    let myChart = echarts.init(this.$refs.ref);
    let option = {
      title: {},
      tooltip: {},
      legend: {},
      toolbox: {},
      grid: {},
      xAxis: [],
      yAxis: [],
      series: []
    };

   // 发生请求
    reports().then(res => {
      console.log(res);
      if (res.data.meta.status == 200) {
        option.legend = res.data.data.legend;
        option.series = res.data.data.series;
        option.xAxis = res.data.data.xAxis;
      //坐标轴有两边留白策略,默认为true
        option.xAxis[0].boundaryGap =false;
        
        option.yAxis = res.data.data.yAxis;

      //因为是在请求中重新赋值,所有要在这里调用显示图标的方法
        myChart.setOption(option);
      }
    });
  }
};
</script>

<style lang='less' scoped>
.my-root {
  height: 100%;

  .box {
    background-color: #fff;

    .rep {
      width: 800px;
      height: 500px;
      padding: 20px 0 0 20px;
    }
  }
}
</style>

效果图: