echarts 折线图

最新推荐文章于 2024-04-24 11:19:03 发布

鸣蜩二九~

最新推荐文章于 2024-04-24 11:19:03 发布

阅读量141

点赞数

分类专栏： Echarts

本文链接：https://blog.youkuaiyun.com/moasad/article/details/117267268

版权

Echarts 专栏收录该内容

22 篇文章

订阅专栏

这篇博客展示了如何使用Echarts库创建一个折线图，并堆叠显示不同数据系列，包括邮件营销、联盟广告、视频广告、直接访问和搜索引擎的数据。通过设置图表的配置项，如title、legend、grid、toolbox、xAxis、yAxis和series，实现了详细的图表展示，便于数据分析和理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下定决心，好好过一天 ~
在这里插入图片描述


var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis' //在 trigger 为 'axis' 的时候，会有多个系列的数据，item为单个
    },
    legend: { //不同系列的标记，绘制自己的颜色和标记
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: { //网格线
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {//工具
        feature: {
            saveAsImage: {} //保存图像
        }
    },
    xAxis: {
        type: 'category', //类目数轴
        boundaryGap: false, //坐标轴两边留白策略，true的时候标签和数据点都会在两个刻度之间的带(band)中间
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line', //折线图、面积图
            stack: '总量', //如果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]
        }
    ]
};

option && myChart.setOption(option);