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

原创于 2022-05-17 10:34:14 发布 · 803 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

工作笔记同时被 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;
  }

}