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

@安子欣

于 2021-12-22 14:27:30 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_35030421/article/details/122084529

版权

本文介绍了如何在Vue项目中利用Echarts创建双柱状图表，并通过dataZoom特性处理X轴数据过多的情况，支持滚动和缩放功能。首先展示了效果图，然后提到了需通过npm安装echarts依赖。接着，文章指出在使用npm时，应按需引入echarts模块。重点讲解了X轴数据过多时如何应用dataZoom属性，并提供了包含chartsRelativeSize()方法的完整页面代码示例，该方法用于Echarts在不同屏幕尺寸下的字体适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴效果图：

前提：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/component/legend");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/dataZoom");
require("echarts/lib/chart/bar"); // 柱状图
export default {
  name: "index&

最低0.47元/天解锁文章