echarts教程（三）：配置多条折线图

忘是亡心i 2022-10-29 15:24 450阅读 0赞

多条折线非常简单，只需要在series中写多个元素，并都指定type为line即可

option = { 
        xAxis: { 
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { 
            type: 'value'
        },
        series: [{ 
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        },
        { 
            data: [1, 2, 3, 4, 5, 6, 7],
            type: 'line'
        }
        ]
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]

如果要显示这种图例  
![在这里插入图片描述][20210216004429935.png]

就要配置legend，并且在series中的元素中指定name，以此来绑定legend，达到点击可以用因此图例  
如果legend与name不一致，则不一致的legend就不会显示，但series还是会显示的。

legend: { 
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },

option = { 
        title: { 
            text: '折线图堆叠'
        },
        tooltip: { 
            trigger: 'axis'
        },
        legend: { 
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: { 
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: { 
            feature: { 
                saveAsImage: { }
            }
        },
        xAxis: { 
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
            type: 'value'
        },
        series: [
            { 
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            { 
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            { 
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            { 
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            { 
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221024/8357584516de4af7bdbfdb50bdab5984.png
[20210216004429935.png]: /images/20221024/ddae25f3756d480da87199f1fb6b559d.png