通用需求
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,
}```