echarts 图表折线图 实例

 

 draw(legendList, name1, name2, data1, data2) {
        var that = this;
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)',
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)',
                                },
                            ],
                            global: false,
                        },
                    },
                },
                fontSize: '12px',
                backgroundColor: 'rgba(7,16,47,.6)', //设置背景图片 rgba格式
                color: 'black',
                borderWidth: '0', //边框宽度设置1
                borderColor: 'transparent', //设置边框颜色
                textStyle: {
                    color: '#fff', //设置文字颜色
                },
                extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',
                formatter: function (params, ticket, callback) {
                    // console.log(params)
                    const item = params[0];
                    const item1 = params[1];

                    var string = '<div style="margin-left:5px">' + item.name.replace('-', '年').replace('-', '月') + '日' + '</div>';
                    string += `<div style="display:flex;align-items: center;margin-top:5px;margin-left:5px"><div style="width:8px;height:8px;background:rgba(2,191,108,1);"></div><span style= "padding:0 10px">${item.name.slice(
                        0,
                        4
                    )}</span> <span style = "padding:0 20px">${item.value} 台</span> </div>`;
                        if(item1 != undefined){
                        string += `<div style="display:flex;align-items: center;margin-top:2px;margin-left:5px;"><div style="width:8px;height:8px;background:#F7B500;"></div><span style= "padding:0 10px">${item1.name.slice(
                            0,
                            4
                        )}</span> <span style = "padding:0 20px">${item1.value} 台</span> </div>`;
                    }
                    return string;
                },
            },
            legend: {
                bottom: 5,
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    fontSize: 12,
                    color: '#FFFFFF',
                },
                icon: 'rect',
            },

            grid: {
                top: '15%',
                left: '1%',
                right: '5%',
                bottom: '18%',
                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitArea: {
                        // show: true,
                        color: '#f00',
                        lineStyle: {
                            color: '#f00',
                        },
                    },
                    axisLabel: {
                        color: '#fff',
                    },
                    splitLine: {
                        show: false,
                    },
                    boundaryGap: false,
                    // data: ['A', 'B', 'C', 'D', 'E', 'F'],
                    data: legendList,
                },
            ],

            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    // max: 140,
                    splitNumber: 4,
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    // name: '2021',
                    name: name1,
                    type: 'line',
                    smooth: true, //是否平滑
                    showSymbol: false,
                    symbol: 'circle',
                    symbolSize: 1,
                    lineStyle: {
                        normal: {
                            // color: "#00b3f4",
                            // shadowColor: 'rgba(0, 0, 0, .3)',
                            // shadowBlur: 0,
                            // shadowOffsetY: 5,
                            // shadowOffsetX: 5,
                        },
                    },
                    label: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    itemStyle: {
                        color: 'rgb(2,191,108)',
                        // borderColor: "#fff",
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    tooltip: {
                        show: true,
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,245,123,1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,245,123,0)',
                                    },
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0,245,123,1)',
                            shadowBlur: 20,
                        },
                    },
                    // data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, 100,200,200,300]
                    data: data1,
                },
                {
                    name: name2,
                    // name: '2020',
                    type: 'line',
                    smooth: true, //是否平滑
                    showSymbol: false,
                    symbol: 'circle',
                    symbolSize: 1,
                    lineStyle: {
                        normal: {
                            // color: "#00ca95",
                            // shadowColor: 'rgba(0, 0, 0, .3)',
                            // shadowBlur: 0,
                            // shadowOffsetY: 5,
                            // shadowOffsetX: 5,
                        },
                    },
                    label: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#00ca95',
                        },
                    },

                    itemStyle: {
                        color: '#F7B500 ',
                        // borderColor: "#fff",
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    tooltip: {
                        show: true,
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                        {
                                            offset: 0,
                                            color: 'rgba(247,181,0,1)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(247,181,0,0)',
                                        },
                                ],
                                false
                            ),
                            shadowColor: 'rgba(247,181,0, 1)',
                            shadowBlur: 20,
                        },
                    },
                    // data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, 502.84, 205.97, 332.79, 281.55,],
                    data: data2,
                },
            ],
        };
        window.addEventListener('resize', () => {
            this.myChart.resize();
        });
        this.myChart.setOption(option);
    }