admin_home/src/views/dashboard/admin/components/LineChart.vue

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

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        chartData: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions(chartData) {
            console.log(chartData.length)
            //循环一下第一个数据，把日期取出来
            if(chartData.length > 0){
                const dates = chartData[0].data.map(item => item.date)
                //管理员
                let data1 = [];
                for(let item of chartData[0].data) {
                    data1.push(item.count)
                }
                //个人会员
                let data2 = [];
                for(let item of chartData[1].data) {
                    data2.push(item.count)
                }
                //政务会员
                let data3 = [];
                for(let item of chartData[2].data) {
                    data3.push(item.count)
                }
                //企业会员
                let data4 = [];
                for(let item of chartData[3].data) {
                    data4.push(item.count)
                }
                //调研员
                let data5 = [];
                for(let item of chartData[4].data) {
                    data5.push(item.count)
                }


                this.chart.setOption({
                    xAxis: {
                        data: dates,
                        boundaryGap: false,
                        axisTick: {
                            show: false
                        }
                    },
                    grid: {
                        left: 20,
                        right: 10,
                        bottom: 20,
                        top: 30,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10]
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        },
                        minInterval: 1,
                        axisLabel: {
                            formatter: function (value) {
                                return value
                            }
                        }
                    },
                    legend: {
                        data: ['管理员','个人会员','政务会员','企业会员','调研员']
                        //管理员=10000
                        //个人会员=1
                        //政务会员=2
                        //企业会员=3
                        //调研员=4
                    },
                    series: [{
                        name: '管理员',
                        smooth: true,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#5570F1',
                                lineStyle: {
                                    color: '#5570F1',
                                    width: 2
                                }
                            }
                        },
                        data: data1,
                        animationDuration: 2800,
                        animationEasing: 'quadraticOut'
                    },{
                        name: '个人会员',
                        smooth: true,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#FFCC91',
                                lineStyle: {
                                    color: '#FFCC91',
                                    width: 2
                                }
                            }
                        },
                        data: data2,
                        animationDuration: 2800,
                        animationEasing: 'quadraticOut'
                    },{
                        name: '政务会员',
                        smooth: true,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#91FFA5',
                                lineStyle: {
                                    color: '#91FFA5',
                                    width: 2
                                }
                            }
                        },
                        data: data3,
                        animationDuration: 2800,
                        animationEasing: 'quadraticOut'
                    },{
                        name: '企业会员',
                        smooth: true,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#FF9191',
                                lineStyle: {
                                    color: '#FF9191',
                                    width: 2
                                }
                            }
                        },
                        data: data3,
                        animationDuration: 2800,
                        animationEasing: 'quadraticOut'
                    },{
                        name: '调研员',
                        smooth: true,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#97A5EB',
                                lineStyle: {
                                    color: '#97A5EB',
                                    width: 2
                                }
                            }
                        },
                        data: data3,
                        animationDuration: 2800,
                        animationEasing: 'quadraticOut'
                    }]
                })

            }


        }
    }
}
</script>