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. 从零开始的Python学习Episode 10——函数

    函数 一.函数的创建 简单格式 def function_name(参数表): 函数体 return 如果没有写return,函数会默认返回一个none 二.函数的参数 必需参数: 调用函数时必需参数 ...

  2. Tensorflow - Implement for a Softmax Regression Model on MNIST.

    Coding according to TensorFlow 官方文档中文版 import tensorflow as tf from tensorflow.examples.tutorials.mn ...

  3. Paper Reading - Im2Text: Describing Images Using 1 Million Captioned Photographs ( NIPS 2011 )

    Link of the Paper: http://papers.nips.cc/paper/4470-im2text-describing-images-using-1-million-captio ...

  4. 英文Datasheet没那么难读

    话说学好数理化,走遍天下都不怕.可是在这个所谓的全球化时代,真要走遍天下的话,数理化还真未必比得上一门外语.作为技术人员,可以看到的是目前多数前沿的产品和技术多来自发达的欧美等国家,而英语目前才是真正 ...

  5. mysql数据库工具

    1.navicat12 中文版及破解 链接:https://pan.baidu.com/s/1TH8m6lduHJybUGhmjFPIAA 提取码:kwcd 2.旧版本mysql-front(连接可选 ...

  6. Android开发第二阶段（5）

    今天:对图片的替换修改,使整个app的图案化更美观. 明天:对Android的对sdcard的操作学习

  7. java包名命名规范

    Java的包名都有小写单词组成,类名首字母大写:包的路径符合所开发的 系统模块的 定义,比如生产对生产,物资对物资,基础类对基础类.以便看了包名就明白是哪个模块,从而直接到对应包里找相应的实现. 由于 ...

  8. HDU 5862 Counting Intersections 扫描线+树状数组

    题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5862 Counting Intersections Time Limit: 12000/ ...

  9. JAVA里面json和java对象之间的相互转换

    1. 把java 对象列表转换为json对象数组,并转为字符串 JSONArray array = JSONArray.fromObject(list);    String jsonstr = ar ...

  10. 升级Xcode之后VVDocumenter-Xcode不能用的解决办法

    VVDocumenter-Xcode上一款快速添加标准注释,并可以自动生成文档的插件.有了VVDocumenter-Xcode Objective-C效果图: Swift效果图:从UUID证书从而保证 ...