Echarts+VUE 实现双柱状图表效果并使用datazoom方法实现X轴数据过多时支持滚动和缩放

先贴效果图：

前提：npm安装echarts依赖： npm install echarts--save

注意：使用npm的时候，我们直接通过require(‘echarts’) 来引入，按需引入需要用到的方法，代码中都有体现；

X轴数据过多时使用dataZoom属性实现，如下图代码块：

页面完整代码如下，可直接复制使用（其中chartsRelativeSize()方法是用于Echarts字体适配大屏的）：

<template>
  <div class="app-container home">
    <div ref="echart1" style="width: 100%; height: 300px;background: #09013a;">            
    </div>
  </div>
</template>
<script>
const Echarts = require("echarts/lib/echarts"); // 基础实例，不使用import
require("echarts/lib/component/title");//按需引入
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/compone