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. 785. Is Graph Bipartite?

    Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...

  2. Echarts简单图表

    一.实现要点 常用可视化图表库 Echarts HighCharts D3.js neo4j (NOSQL) 1.导入js库 <script type="text/javascript ...

  3. HWI的安装

    一.安装的过程 hwi的安装过程: 1.解压src源码包:tar -zvxf apache-hive-1.2.2-src.tar.gz 2.进到HWI目录下:cd /home/bigdata/apac ...

  4. OpenLDAP介绍

    首先LDAP是一个轻量级的产品(LightWeight),是一个Directory(D),存取的协议(Access Protocol). 我要着重指出,LDAP是一个数据库,但是又不是一个数据库.说他 ...

  5. Hyperledger Fabric CouchDB as the State Database——使用CouchDB

    使用CouchDB作为状态数据库 状态数据库选项 状态数据库包括LevelDB和CouchDB.LevelDB是嵌入在peer进程中的默认键/值状态数据库,CouchDB是一个可选的外部状态数据库.与 ...

  6. Unity学习笔记草稿篇（一）为unity配置添加VS智能感知

    1. 打开要编辑的配置文件: 2. 菜单栏 -> xml -> 架构(schema) -> 添加或使用xsd.如下图所示:

  7. 剑指 Offer——数字在排序数组中出现的次数

    1. 题目 2. 解答 时间复杂度为 \(O(n)\) 的算法,顺序遍历数组,当该数字第一次出现时开始记录次数. class Solution { public: int GetNumberOfK(v ...

  8. GitLab 搭建与使用

    操作系统:Centos 7 环境:VM虚拟机 0x00:这里说下VM 虚拟机的配置 然后选择NAT模式 接下来配置网络 cd /etc/sysconfig/network-scripts/ 编辑:vi ...

  9. Variable() placeholder() constant() 的区别

    转载来自: http://www.studyai.com/article/33e22cef42274e8a

  10. MVC与ajax【转】

    首先我们要实现用户的注册功能.进入visual studio 点击文件->新建->项目->选择ASP.NET Web应用程序(.NET Framework)->选择的模板为MV ...