前端学习ECharts--数据对比折线图

数据对比功能中经常会使用图表来进行展示,在图表的展示中,ECharts中的折线图就更加容易展现。其option的设置出了series的值数据有区别外,其他的设置与普通的折线图无明显差别。在下方展示一个简单的数据对比折线图。

option = {

    title: {

        text: '未来一周气温变化',

    },

    tooltip: {

        trigger: 'axis'

    },

    legend: {

        data:['最高气温','最低气温']

    },

    toolbox: {

        show: true,

    },

    xAxis:  {

        type: 'category',

        boundaryGap: false,

        data: ['周一','周二','周三','周四','周五','周六','周日']

    },

    yAxis: {

        type: 'value',

        axisLabel: {

            formatter: '{value} °C'

        }

    },

    series: [

        {

            name:'最高气温',

            type:'line',

            data:[11, 11, 15, 13, 12, 13, 10],

        },

        {

            name:'最低气温',

            type:'line',

            data:[1, -2, 2, 5, 3, 2, 0],

        }

    ]

};

折线的增添与series里的数据有关,里面给多少个{}数据就会形成多少条折线。

在ECharts的官方实例中有一款具有多条折线的示例中,会出现一种情况,最上方的折线是下面折线同点位值的和。该种情况的出现是因为在series中,每个数据具有一个相同的stack值。解决该种情况的方法就是删除每个series中的stack标签。

ECharts表渲染最简单的方式是后台传递的值按照ECharts的数据格式进行封装传递,将后台传入的值带入到相应的option中,就可以直接渲染。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。