TimeRangeSelector.vue 2.71 KB
Newer Older
李维's avatar
李维 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
<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>