vue-echarts 横坐标缩放区域datazoom设置

最新推荐文章于 2025-07-12 11:00:18 发布

古娜拉黑暗之神哇咔咔

最新推荐文章于 2025-07-12 11:00:18 发布

阅读量803

点赞数

CC 4.0 BY-SA版权

分类专栏：工作笔记 vue-echart 文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/ForEach_kaka/article/details/124815925

工作笔记同时被 2 个专栏收录

5 篇文章

订阅专栏

vue-echart

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用ECharts库，并通过 TypeScript 实现数据缩放（dataZoom）的动态调整。通过监听 types 属性变化，实时更新数据缩放的开始和结束值。

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

index.vue

<template> 
    <vue-echarts @datazoom='onDataZoom($event, Echarts.option)' :option="options" />
</template>

<script lang="ts" src="./index.ts"></script>

index.ts

export default class ComponentName extends VueComponentBase {

 @Prop({ type: Array, default() { return this.data.types; } }) types: string[];

  dataZoom = {
    start: 0,
    end: 100,
  };


  @Watch('types')
  typeChange(val: string[]) {
    this.options.dataZoom[0].start = this.dataZoom.start;
    this.options.dataZoom[0].end = this.dataZoom.end;
  }


  onDataZoom(event, options) {
    this.dataZoom = event;
  }

}