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. Quartz学习--三 Hello Jdbc Quartz! 和 demo 结尾

    四. Hello JDBC Quartz! JDBC方式: 就是说通过数据库的jdbc链接来进行quartz的一个配置 Quartz支持了很好的支持 demo用例 使用mysql作为例子进行演示 相比 ...

  2. 解决xampp启动mysql失败

    进入到注册表内 命令:regedit 进入到路径:计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MySQL 修改路径为:" ...

  3. K8S-RedisCluster搭建

    简介         Redis-Cluster采用无中心结构,每个节点保存数据和整个集群状态,每个节点都和其他所有节点连接, mastart节点之间存放的数据并不是相同的,只是其中的一部分,当我们请 ...

  4. shell基础 -- 入门篇

    shell 英文含义是“壳”,这是相对于内核来说的,shell 也确实就像是内核的壳,通常来说,所有对内核的访问都要经由 shell .同时,shell 还是一门功能强大的编程语言.shell 是 L ...

  5. Educational Codeforces Round 63 D. Beautiful Array

    D. Beautiful Array time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. Jenkins之Sonar 代码检查

    一.简介 SonarQube 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等 ...

  7. sql脚本创建用户角色权限表

    /******************************************/ /* 名称:权限管理 */ /* 编写日期:2010.5.20 */ /* 开发者:dangqinghua * ...

  8. C#中的Split用法以及详解

    一.String.Split方法提供了如下6个重载函数: 名称 说明 String.Split (Char[]) 返回包含此实例中的子字符串(由指定 Char 数组的元素分隔)的 String 数组. ...

  9. txt文件存储问题

    一.实际大小与占用空间不一致: 1.占用空间和磁盘有关,一般磁盘存储最小大小为4kb(4096字节). 2.当txt文件中仅有1个数字‘5’的时候,大小显示为1个字节(属性看,列表详细不精确),占用空 ...

  10. mysql 多查询临时表的运用

    SELECT * from (select count(*) imgCount1 from imagetable where SeriesID = '1201061992020630292018092 ...