<template> <div class="com-trs"> <div ref="refEcharts" class="chart-slider"></div> </div> </template> <script> export default { name: 'TimeRangeSelector', props: { value: { type: Object, default: () => { return { start: 0, end: 100 } } } }, watch: { value: { handler(val) { this.parentValueChange = true; this.setTimeRange(val.start * 100, val.end * 100); }, deep: true } }, data() { return { insECharts: null, parentValueChange: false } }, mounted() { this.initEcharts(); }, methods: { initEcharts() { if(!this.insECharts) { this.insECharts = this.$echarts.init(this.$refs.refEcharts); } const option = { grid: { left: 10, right: 10, top: 10, bottom: 10 }, tooltip: {}, dataZoom: [ { type: 'slider' }, ], xAxis: { show: false } , yAxis: { show: false }, }; this.insECharts.on('dataZoom', (evt) => { if(this.parentValueChange) { this.parentValueChange = false; return; } this.$emit('change', { start: evt.start / 100, end: evt.end / 100 }) this.$emit('input', { start: evt.start / 100, end: evt.end / 100 }) }) this.insECharts.setOption(option); }, setTimeRange(start, end) { this.insECharts.dispatchAction({ type: 'dataZoom', // 可选,dataZoom 组件的 index,多个 dataZoom 组件时有用,默认为 0 dataZoomIndex: 0, // 开始位置的百分比,0 - 100 start: start, // 结束位置的百分比,0 - 100 end: end, // // 开始位置的数值 // startValue: number, // // 结束位置的数值 // endValue: number }); } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .com-trs { width: 100%; height: 50px; } .chart-slider { width: 100%; height: 100%; } </style>