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画折线图的一种数据处理方式

猜你喜欢
