echarts 折线图组件 动态数据

组件代码

<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
    import echarts from 'echarts'
   // import resize from './mixins/resize'

    export default {
      //  mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '200px'
            },
            chartData: {
                type: Object
            }
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.initChart()
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        watch: {
            chartData: {
                immediate: true,
                deep: true,
                handler(newVal, oldVal) {
                    if (this.chart) {
                        if (newVal) {
                            this.setOption(newVal)
                        } else {
                            this.setOption(oldVal)
                        }
                    }
                }
            }
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById(this.id), 'macarons');
                this.chart.clear();
                this.setOption(this.chartData);
                this.chart.resize();
            },
            setOption(option) {
                this.chart.setOption({
                    xAxis: {
                        data: this.chartData.xAxis.data,
                        axisTick: {
                            show: false
                        }
                    },
                    grid: {
                        left: 10,
                        right: 10,
                        bottom: 20,
                        top: 30,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10]
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        }
                    },
                    legend: {
                        data: this.chartData.legend.data
                    },
                    dataZoom: [{
                        type: 'inside',
                        filterMode:'empty',
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 10,
                        filterMode:'empty',
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '90%',
                        handleStyle: {
                            color: '#448BF6',
                            shadowBlur: 3,
                            shadowColor: 'rgba(96, 192, 221, 0.8)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: this.chartData.series[0].name,
                            type: this.chartData.series[0].type,
                            data: this.chartData.series[0].data,
                            lineStyle: {
                                color: "#0174DF",
                                width: 1
                            },
                            // 仅仅修改标注点颜色
                            itemStyle: {
                                color: '#0174DF'
                            },
                            animationDuration: 2000,
                        }
                    ]
                })
            }
        }
    }
</script> 

父组件代码

<line-chart2 v-if="chartFlag" ref="lineChartOne" :id="myChart1" :height="chartHeight" width="chartWidth" :chart-data="chartData1"></line-chart2>

 

引入

import leftPart from './leftPart'
import lineChart from './lineChart'
import global from '../../Global'
import bus from '../../assets/common/js/bus'
import lineChart2 from './lineChart2'
import timeUtils from '../../assets/common/js/timeUtils'
export default {
    name: "secondTab",
    components: {
        leftPart,
        lineChart,
        lineChart2,
    },
    data(){
        return{
            myChart1:'myChart1',
            chartHeight:'200px',
            chartWidth:'1400px',
            chartFlag:false,
            chartData1: {
                xAxis: {
                    data: []
                },
                legend: {
                    data: []
                },
                series: [
                    {
                        name: '123',
                        type: 'line',
                        data: []
                    }
                ]
            },
    },

methods:{
    //获取趋势图数据
    getFirstChartData(){
        console.log(1);
        this.$axios({
            url:url,
            methods:'get',
            params:{},
        }).then((res)=>{
            if(res.status==200){
                this.chartData1.xAxis.data = 'x轴值';
                this.chartData1.series[0].name = '趋势图';
                this.chartData1.series[0].data = ‘y轴值’;
             
            }else {
                this.tips('网络故障','error')
            }
        })
    },