总结之页面数据渲染与数据结构设计（一）-蒲公英云

总结之页面数据渲染与数据结构设计（一）

通用需求

1、图表渲染如下
在这里插入图片描述

页面数据结构大概分为3种（1、单数据月份图，2、饼状图、3多数据月份图）

饼状图前端数据渲染结构如下：

var pieData =[
            {value: 20, name: '已拜访'},
            {value: 10, name: '未拜访'},
            {value: 60, name: '在谈'}
        ]

这个结构SQL查询相对而言方便
直接使用SQL构造结构即可

SELECT '已拜访' AS name, count(*) AS value FROM c_discuss_node UNION SELECT '已洽谈' AS name, count(*) AS value FROM c_area_discuss_node UNION SELECT '区市县已洽谈' AS name, count(*) AS value FROM c_sign_node

单数据月份图前端数据渲染结构如下：

var lineData = [
            {value: 0, name: '1月'},{value: 0, name: '2月'},{value: 0, name: '3月'},
            {value: 0, name: '4月'},{value: 0, name: '5月'},{value: 0, name: '6月'},
            {value: 0, name: '7月'},{value: 0, name: '8月'},{value: 0, name: '9月'},
            {value: 0, name: '10月'},{value: 0, name: '11月'},{value: 0, name: '12月'},
        ]

要求查询12月的相关数据
SQL来实现12月份数据（有可能部分月份为0）太繁琐、太耗性能还要按月份排序

可以先查出对应月份的数值，在前端处理数据结构
SQL如下：

SELECT a.name,count(*) as value FROM 
            (SELECT id, CONCAT(MONTH(createTime),'') as name FROM c_sign_node where YEAR( createTime ) = YEAR( NOW() ) 
            ) a GROUP BY a.name

前端处理代码

var lineData = [
            {value: 0, name: '1月'},{value: 0, name: '2月'},{value: 0, name: '3月'},
            {value: 0, name: '4月'},{value: 0, name: '5月'},{value: 0, name: '6月'},
            {value: 0, name: '7月'},{value: 0, name: '8月'},{value: 0, name: '9月'},
            {value: 0, name: '10月'},{value: 0, name: '11月'},{value: 0, name: '12月'},
        ]
        $.ajax({
            type: 'post',
            url: '${base}/merchantsTask/countTableData.json',
            async: false,
            success: function (result) {
                $.each(result.obj,function(i,item) {
                    lineData[item.name-1].value= item.value
                    // i+item.name = item.value;
                });
            }
        });

多数据月份图前端数据渲染结构如下

var bar2data ={
            legend:['已签约数', '已洽谈量'],
            xAxis: ['1月', '2月', '3月', '4月', '5月',"6月","7月","8月","9月","10月","11月","12月"],
            data1: [50, 32, 31, 54, 62,40],
            data2: [20, 42, 31, 84, 90,90],
        }

相关实现同上

前端代码

var arr1 = [0,0,0,0,0,0,0,0,0,0,0,0]
        var arr2 = [0,0,0,0,0,0,0,0,0,0,0,0]
        $.ajax({
            type: 'post',
            url: '${base}/merchantsTask/discussNodeData.json',
            async: false,
            success: function (result) {
                $.each(result.obj,function(i,item) {
                    arr1[item.name-1] = item.value
                   // i+item.name = item.value;
                });
            }
        });
        $.ajax({
            type: 'post',
            url: '${base}/merchantsTask/signNodeData.json',
            async: false,
            success: function (result) {
                $.each(result.obj,function(i,item) {
                    arr2[item.name-1] = item.value
                    // i+item.name = item.value;
                });
            }
        });
        var bar2data ={
            legend:['已签约数', '已洽谈量'],
            xAxis: ['1月', '2月', '3月', '4月', '5月',"6月","7月","8月","9月","10月","11月","12月"],
            data1: arr1,
            data2: arr2,
        }```