美文网首页前端是万能的
Echarts 初踩坑 stack 折线图不交叉

Echarts 初踩坑 stack 折线图不交叉

作者: 肆意木 | 来源:发表于2019-07-09 20:37 被阅读1次

    项目中用到了 Echarts,然后发现图表不对,可以到 echarts 官网上查看,https://echarts.baidu.com/examples/editor.html?c=line-stack

    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:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                data:[0, 0, 0, 0, 1290, 0, 0]
            }
        ]
    };
    

    最后一步步查找,原来是 stack 的原因,stack 值为 ‘总量是’,折线图堆叠(第二条线的数值=本身的数值+第一条线的数值,第三条的数值=第二条线图上的数值+本身的数值,以此类推......)显示,修改值或者直接删除这个属性,就不会折叠显示。

    相关文章

      网友评论

        本文标题:Echarts 初踩坑 stack 折线图不交叉

        本文链接:https://www.haomeiwen.com/subject/jhaxkctx.html