echarts折线图

linechart: function(num) {
                var mySize = document.getElementById('consumer-trend-line');
                mySize.style.width = 360 + 'px';
                mySize.style.height = 260 + 'px';
                var myLineChart = echarts.init(mySize);
                var xdata = this.lineDatas.map(v => v.name);
                var year = this.dataRangeArr[this.dataRangeIndex].startDate.slice(0, 4);
                var month = this.dataRangeArr[this.dataRangeIndex].startDate.slice(5, 7);
                var saturdayList = this.getMonthSaturdayDate(year, month);
                switch (num) {
                    case 0:
                        var seriesData = [];
                        this.lineDatas.map(v => {
                            if (v.isException == 1) {
                                if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
                                    saturdayList
                                    .includes(v.date)) {
                                    seriesData.push(Object.assign(v, {
                                        itemStyle: {
                                            color: '#0BDB7E',
                                            borderWidth: 1.5
                                        }
                                    }))

                                } else {
                                    seriesData.push(Object.assign(v, {
                                        itemStyle: {
                                            color: '#0BDB7E',
                                            borderWidth: 1.5
                                        },
                                        symbol: 'none'
                                    }))
                                }
                            } else {
                                if (v.date == this.formatDateTwo(new Date(year, month, 0)) ||
                                    saturdayList
                                    .includes(v.date)) {
                                    seriesData.push(Object.assign(v, {
                                        itemStyle: {
                                            color: '#FF8646',
                                            borderWidth: 1.5
                                        }
                                    }))
                                } else {
                                    seriesData.push(Object.assign(v, {
                                        itemStyle: {
                                            color: '#FF8646',
                                            borderWidth: 1.5
                                        },
                                        symbol: 'none'
                                    }))
                                }
                            }
                        });
                        break;
                    case 1:
                        var seriesData = [];
                        this.lineDatas.map(v => {
                            if (v.isException == 1) {
                                seriesData.push(Object.assign(v, {
                                    itemStyle: {
                                        color: '#0BDB7E',
                                        borderWidth: 1.5
                                    }
                                }))
                            } else {
                                seriesData.push(Object.assign(v, {
                                    itemStyle: {
                                        color: '#FF8646',
                                        borderWidth: 1.5
                                    }
                                }))
                            }
                        });
                        break;
                }
                var option = {
                    xAxis: {
                        type: 'category',
                        data: xdata
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: seriesData,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            color: 'linear-gradient(180 deg, #0DDE7E 0%, rgba(4, 205, 124, 0) 100%)',
                            opacity: 0.2
                        },
                        lineStyle: {
                            color: '#0BDB7E'
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            shadowStyle: {
                                color: 'transparent'
                            }
                        },
                        extraCssText: `width:109px;height:55px;line-height:33rpx;background: no-repeat center/100% url(./static/images/consumeTrendbgm.png);

font-size:24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;

color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
                        confine: true,
                        position: function(pt) {
                            return [pt[0] - 27, pt[1] - 73];
                        },
                        formatter: function(data) {
                            let desp = ['', '消费金额偏高', '消费金额偏低'][data[0].data.isException - 1]
                            return data[0].name + '消费' + data[0].value + '元' + '<br>' + desp;
                        }
                    },
                };
                option && myLineChart.setOption(option);
                window.addEventListener('resize', function() {
                    myLineChart.resize();
                })
            },

<style>

        #consumer-trend-line {
                        position: absolute;
                        top: 120rpx;
                        left: 10rpx;
                        z-index: 100;
       }

</style>