1.提取Echarts元素

xxxEcharts.vue

<template>
    <div>
        <div ref="devchar"></div>
    </div>
</template>

<script>
    export default {
        components: {
        },
        data() {
            return {
                devchar:null,
                option: 
 
null,
                time: [],
                data:[],
            }
        },
        methods: {
            clear(){
                if(null!=this.option.xAxis)
                    this.option.xAxis.data = [];
                if(null!=this.option.series){
                    this.option.series[0
 
].data = [];
                    this.option.series[0].markPoint.data = [];
                    this.option.series[1].data = [];
                }
                this.time = [];
                this.data = [];this.devchar=null;
            },
            setData(time,data){
                this.time=time;
                
 
this.data=data;this.setOption();
            },
            setOption(){
                if(null==this.option)
                    return;
                this.option.xAxis.data = this.time;
                this.option.series[0].data = this.data;this.devchar.setOption(this.option,true);
                let that = this;
                window.addEventListener('resize', function() {
                    that.termsinalchar.resize();
                });
            },
            init(){
                this.devchar = echarts.init(this.$refs.devchar);
                this.option = {
                    color: ['#975fe4'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    dataZoom: [{
                        type: 'slider',
                        show: true,
                        realtime: true,
                        height:20,
                        start: 0,
                        end: 100
                    }],
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '18%',
                        containLabel: true
                    },
                    legend: {
                        show:false,
                        left:'center',
                        data: ['線路1']
                    },
                    xAxis: {
                        name: '',
                        type: 'category',
                        boundaryGap: false,
                        data: this.time
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color:'#32316E',
                                width: '1'
                            }
                        }
                    },
                    series: [
                        {
                            name: '線路1',
                            type: 'line',
                            smooth: true, //平滑
                            data: this.data,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: '#975fe4', // 折線條的顏色
                                    borderColor: '#975fe4', // 拐點邊框顏色
                                }
                            },
                            markPoint: {
                                data: []
                            }
                        }
                    ]
                };
            },
        },
        created() {},
        mounted() {
            this.init();
        }
        
    }
</script>

<style>
</style>

2. Modal

<style lang="less">
</style>
<template>
    <Modal draggable v-model="devModal" width="950px" :title="modalTitle" @on-ok="okEvent(modalTitle)" footer-hide>
        <Row>
            <Col span="24">
                <xxxEcharts v-if="devEchart" ref="xxxEcharts"></xxxEcharts>
            </Col>
        </Row>
        <!--<div slot="footer">
            <Button type="text" size="large" @click="devModal=false">取消</Button>
        </div>-->
    </Modal>
</template>
<script>
export default {
　　import xxxEcharts from './xxxEcharts.vue';
　　components: {
　　　　xxxEcharts
　　},
　　data() {
　　　　return {
　　　　　　devModal: false,
　　　　　　devEchart:true,
　　　　　　modalTitle: '線路',
　　　　　　option:null,
　　　　　　timer:null,
　　　　　　data:[],
　　　　　　time: []
　　   }
　　},
　　methods: {
　　　　showView() {
　　　　　　this.devModal=true;
　　　　　　this.loadData();
　　　　}
　　　　loadData(){
　　　　　　this.time=[{time:12345678},{time:12345778}]
　　　　　　this.data=[10,20,30];
　　　　　　this.refreshEcharts();
　　　　},
　　　　refreshEcharts(){
　　　　　　let that=this;
　　　　　　this.signalEchart=false;
　　　　　　this.$nextTick(function() {
　　　　　　　　that.signalEchart=true;
　　　　　　});
　　　　　　if(this.timer!=null){
　　　　　　　　window.clearTimeout(this.timer);
　　　　　　}

　　　　　　this.timer = setTimeout(function() {
　　　　　　　　that.$nextTick(function() {
　　　　　　　　　　that.$refs.xxxEcharts.clear();
　　　　　　　　　　that.$refs.xxxEcharts.init();
　　　　　　　　　　that.$refs.xxxEcharts.setData(this.time,this.data);
　　　　　　　　});
　　　　　　},500);
　　　　},


　　},
　　mounted() {
　　}
}