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. SQL Server临时表漫谈

    SQL Server是微软的关系型数据库,对于刚入门的我是一个非常友好的开发工具.可视化界面的安装与操作,非常适合刚入门的我. 其实大家要找这方面的资料,在网上一搜一大堆,这里我就不赘述那些了,基本都 ...

  2. Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问题

    Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问 ...

  3. python_MySQL 数据库操作

    Python中的mysql操作可以使用MySQLdb模块来完成.它符合Python社区设计的Python Database API SpecificationV2.0标准,所以与其他的数据库操作的AP ...

  4. python中Requests模块中https请求在设置为忽略有效性验证，屏蔽告警信息的方式

    增加下面的就ok了from requests.packages.urllib3.exceptions import InsecureRequestWarningrequests.packages.ur ...

  5. 什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？

    什么是Meta标签? Meta标签给搜索引擎提供了许多关于网页的信息,这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的. 你可以在网页的 <head>元素中发现<meta& ...

  6. World Cup(思维+模拟)

    Description Allen wants to enter a fan zone(球迷区) that occupies a round square and has nn entrances. ...

  7. C语言调查问卷

    1.你对自己的未来有什么规划?做了哪些准备?毕业后应该不会从事编程类工作,目前有在学习感兴趣的东西.2.你认为什么是学习?学习有什么用?现在学习动力如何?为什么?学习就是把不懂变成懂,可以充实自己.没 ...

  8. MUI设置卡头卡位的形式进行切换

    这是mui的官方帮助文档,一切问题都能在这里找到http://dev.dcloud.net.cn/mui/ui/解决方案. 下面是MUI官方对卡头卡尾的一些描述: 在mobile app开发过程中,经 ...

  9. springMVC 流程

    springMVC流程控制 SpringMVC流程 web.xml 中配置 org.springframework.web.servlet.DispatcherServlet 这一步其实和spring ...

  10. YARN中用的作业调度算法：DRF（Dominant Resource Fairness）

    在Mesos和YARN中,都用到了dominant resource fairness算法(DRF),它不同于hadoop基于slot-based实现的fair scheduler和capacity ...