前端是万能的

Echarts 初踩坑 stack 折线图不交叉

2019-07-09  本文已影响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 值为 ‘总量是’,折线图堆叠(第二条线的数值=本身的数值+第一条线的数值,第三条的数值=第二条线图上的数值+本身的数值,以此类推......)显示,修改值或者直接删除这个属性,就不会折叠显示。

上一篇下一篇

猜你喜欢

热点阅读