深入浅出ECharts系列 折线图

Posted 孤星隐客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入浅出ECharts系列 折线图相关的知识,希望对你有一定的参考价值。

深入浅出ECharts系列(二)

  1. 目标

本次教程的目标是实现“折线图堆叠”折线,实现结果如图:

 技术分享

 

 2. 准备工作

a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载的版本,也可以自己定制相应功能的版本,下面附上插件的下载地址:

http://echarts.baidu.com/download.html

我们下载完整版为大家进行演示。

 

 3. 正式开始

首先,我新建了一个MVC4项目,将下载的文件放到对应的位置:

 技术分享

然后新建一个控制器和对应的视图,添加对文件的引用,并且新增一个id为main的div做为地图的容器来展现地图。如图:

 技术分享

接着开始写JS脚本来实现我们想要的效果:

通过 echarts.init方法初始化一个 echarts实例并通过 setOption方法生成折线图

<script>   

//初始化

var myChart = echarts.init(document.getElementById(‘main‘));

//参数设置

option = {

        title: {      //标题组件

            text: ‘折线图堆叠‘

        },

        tooltip: {    //提示框组件

            trigger: ‘axis‘

        },

        legend: {     //图例组件

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

        },

        grid: {       //直角坐标系内绘图网格

            left: ‘3%‘,

            right: ‘4%‘,

            bottom: ‘3%‘,

            containLabel: true

        },

        toolbox: {     //工具栏

            feature: {

                saveAsImage: {}

            }

        },

        xAxis: {       //直角坐标系 grid 中的 x 轴

            type: ‘category‘,

            boundaryGap: false,

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

        },

        yAxis: {       //直角坐标系 grid 中的 y 轴

            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]

            }

        ]

    };

 

    myChart.setOption(option);   //参数设置方法     

</script>

 

具体参数含义可参考,不再赘述:

http://echarts.baidu.com/option.html#title

 

 4. 最终效果

 技术分享

 

更多精彩文章请关注 =》 我爱学框架

 

以上是关于深入浅出ECharts系列 折线图的主要内容,如果未能解决你的问题,请参考以下文章

1Echarts系列Vue中设置echarts折线图样式(图表网格标签提示标题文字),手把手教程系列

1Echarts系列Vue中设置echarts折线图样式(图表网格标签提示标题文字),手把手教程系列

Echarts 简单报表系列二:折线图

ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动

Echarts怎么点击控制折线图的折线点显示数据

echarts怎么做实时动态的折线图