echars画折线图的一种数据处理方式

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>echars画折线图的一种数据处理方式</title>

    </head>

    <script src="js/jquery.js"></script>

    <script src="js/echarts.js"></script>

    <body>

        <!--默认状态下  x轴显示间隔是跟 div的宽度 width 有关自动调整的-->

        <div id="main" style="width: 600px;height:400px;"></div>

    </body>

    <script type="text/javascript">

        /**

         * 这种处理数据方式的好处是：后台只需要把（每条记录）每个对象需要展示的属性封装成一个list数组即可

         * 而不用遍历数据对象集合进行复杂的拼接

         */

        $(function() {

            /*  月份     全国     城市     农村*/

            var seriesData = [

                ["2018年01月",1,2,3],

                ["2018年02月",2,2,3],

                ["2018年03月",5,2,3],

                ["2018年04月",9,2,3],

                ["2018年05月",4,2,3],

                ["2018年06月",3,2,3],

            ];

            var title = "中国居民消费价格指数";

            //    console.log("k+1= "+(Number(k)+1));

            var legend = ['全国','城市','农村'];

            //后台拼接好charData对象（只需要把每条记录的时间和要展示成图表的属性一起拼接成 List，

            //再把他们放入一个大List再和legend、title一起封装成charData对象传到前台即可）

            var charData = {

                "title":title,

                "legend":legend,

                "seriesData":seriesData

            };

            drawChart(charData);

        });

        //画折线图

        function drawChart(charData) {

            var title = charData.title;

            var legend = charData.legend;

            var xA = charData.seriesData.map(function (item) {return item[0];});

            console.log("xA= "+xA);//xA= 2018年01月,2018年02月,2018年03月,2018年04月,2018年05月,2018年06月

            var ss = [];

            //决定画出几条折线

            for(var i=0;i<legend.length;i++){

                var s = {

                            name: legend[i],

                            type: 'line',

                            data: charData.seriesData.map(function (item) {

                                    return item[i+1];//从seriesData中数组元素的第二个元素角标1的开始拼接数据

                                  }),

                        };

                ss.push(s);

            }

            console.log("ss= "+JSON.stringify(ss));

    /*        ss= [    {"name":"全国","type":"line","data":[1,2,5,9,4,3]},

                    {"name":"城市","type":"line","data":[2,2,2,2,2,2]},

                    {"name":"农村","type":"line","data":[3,3,3,3,3,3]}]

    */

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

            var option = {

                title: {

                    text: title

                },

                tooltip: {

                    trigger: 'axis'

                },

                  legend: {

                      y: 'bottom' ,//图例显示在图表底部

                    data: legend/*['全国','城市','农村']*/

                },

                xAxis:{

                    data: xA/*data.map(function (item) {

                        return item[0];

                    })*/

                },

                yAxis: {

                   type:'value'

                },

                series: ss

                /*[

                    {

                        name: '全国',

                        type: 'line',

                        data: data.map(function (item) {

                                return item[1];

                              }),

                    },

                    {

                        name: '城市',

                        type: 'line',

                        data: data.map(function (item) {

                                return item[2];

                              }),

                    },

                    {

                        name: '农村',

                        type: 'line',

                        data: data.map(function (item) {

                                return item[3];

                              }),

                    },

                ]*/

            };

            myChart.setOption(option);

        }

    </script>

</html>

echars画折线图的一种数据处理方式的更多相关文章

  1. SAS 画折线图PROC GPLOT

    虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...

  2. python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）

    最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...

  3. Matplotlib学习---用matplotlib画折线图（line chart）

    这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevd ...

  4. 使用OpenCV画折线图

    使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程 原文链接:http://www.360doc.com/content ...

  5. IOS绘制渐变背景色折线图的一种尝试

    1.绘制折线图 上次在群里看到一个折线图划的很漂亮,自己想实现一个这样的 ,但是一直没什么头绪,不知道怎么做,就开始在网上查找划线,绘 制渐变色这一块的内容,用最笨的方式,自己尝试的写了一些,也没 有 ...

  6. gnuplot画折线图

    之前尝试用jfreechart画自定义横坐标的折线图或时序图,发现很复杂,后来改用gnuplot了. gnuplot在网上一搜就能找到下载地址. 安装完成后,主要是命令行形式的交互界面,至少比jfre ...

  7. python的turtle模块画折线图

    代码如下: import turtle yValues = [10.0,7.4,6.4,5.3,4.4,3.7,2.6] def main(): t = turtle.Turtle() t.hidet ...

  8. echarts入门基础，画折线图

    注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  9. python用matplotlib画折线图

    折线图: import matplotlib.pyplot as plt y1=[10,13,5,40,30,60,70,12,55,25] x1=range(0,10) x2=range(0,10) ...

随机推荐

  1. 修改Config文件

    /// <summary> /// Config文件操作 /// </summary> public class Config { /// <summary> // ...

  2. JAVA学习笔记--迭代器

    迭代器(Iterator)是一种设计模式.它是一个对象,它的工作是遍历并选择序列中的对象,而客户端程序员不必知道或关心该序列底层的结构.创建迭代器的代价小,因而迭代器通常被称为轻量级对象. 一.Ite ...

  3. Codeforces Round #553 (Div. 2) C

    C. Problem for Nazar time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. [T-ARA][HOLIDAY]

    歌词来源:http://music.163.com/#/song?id=22704407 HOLI HOLI DAY [HOLI HOLI DAY] 뚜뚜 뚜루루 [ddu-ddu ddu-lu-lu ...

  5. LCA最近公共祖先（Tarjan离线算法）

    这篇博客对Tarjan算法的原理和过程模拟的很详细. 转载大佬的博客https://www.cnblogs.com/JVxie/p/4854719.html 第二次更新,之前转载的博客虽然胜在详细,但 ...

  6. Scrum立会报告+燃尽图（Beta阶段第二周第六次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2414 项目地址:https://coding.net/u/wuyy694 ...

  7. 欢迎来怼—第二次Scrum会议

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华小组照片 二.开会信息 时间:2017/10/14 18:30~18:47,总计17min.地点:东北师范 ...

  8. Nginx 配置站点

    1-进入 配置文件夹   cd /etc/nginx/cof.d   2-创建一个一站点名称命名的配置文件   vim kestrel-syslyracom.conf   3-在.conf 文件中输入 ...

  9. Python_1

    转载来源:http://www.cnblogs.com/wupeiqi/articles/4906230.html python内部执行过程如下: python解释器在加载 .py 文件中的代码时,会 ...

  10. PHP中普通属性和静态属性

    普通属性(实例属性): 实例的单词为:instance 实例,其实也叫做“对象”: 普通(实例)属性,就是一个可以在该类实例化出的对象上使用的属性! 定义形式: class  类名{ var  $属性 ...