|
|
|
|
|
$(function () {
|
|
|
|
|
|
const axiosConf = { url: config_serverIp + "/dataex/report/QuerySimpleGP", method: 'post' };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 标题增加年份
|
|
|
l1();
|
|
|
c1();
|
|
|
c2();
|
|
|
c3();
|
|
|
r1();
|
|
|
r2();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function r2() {
|
|
|
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "stage_liveness_month",
|
|
|
"query_param": [
|
|
|
"1",
|
|
|
"2021",
|
|
|
"1",
|
|
|
"2021"
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"sub_total",
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"org_name",
|
|
|
"social_typename"
|
|
|
]
|
|
|
}
|
|
|
}).then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
console.log("resData112", resData);
|
|
|
// const xAxisName = resData.groups[0]
|
|
|
// const legendData = resData.groups[1]
|
|
|
|
|
|
// let series = []
|
|
|
// resData.groups[1].map((e, i) => {
|
|
|
// series.push({
|
|
|
// name: e,
|
|
|
// type: 'bar',
|
|
|
// data: resData.datas[i],
|
|
|
// barMaxWidth: 20,
|
|
|
// })
|
|
|
|
|
|
// })
|
|
|
// console.log("xAxisName", xAxisName);
|
|
|
// console.log("legendData", legendData);
|
|
|
// console.log("series", series);
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
function c1() {
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "stage_org_social_all",
|
|
|
"query_param": [
|
|
|
"1"
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"org_name",
|
|
|
"topic_name"
|
|
|
]
|
|
|
}
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
console.log(resData)
|
|
|
const xAxisName = resData.groups[0]
|
|
|
const legendData = resData.groups[1]
|
|
|
|
|
|
let series = []
|
|
|
resData.groups[1].map((e, i) => {
|
|
|
series.push({
|
|
|
name: e,
|
|
|
type: 'bar',
|
|
|
stack: "all",
|
|
|
data: resData.datas[i],
|
|
|
barMaxWidth: 40,
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
console.log("xAxisName", xAxisName);
|
|
|
console.log("legendData", legendData);
|
|
|
console.log("series", series);
|
|
|
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('c1')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
grid: {
|
|
|
top: 30,
|
|
|
bottom: 60,
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94", "#4992FF", "#FF6E76"],
|
|
|
legend: {
|
|
|
data: legendData,
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xAxisName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
rotate: "45"
|
|
|
}
|
|
|
},
|
|
|
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
|
|
|
xAxisIndex: 0, //显示x轴滑块
|
|
|
height: "15px",
|
|
|
end: 80,
|
|
|
top: "85%"
|
|
|
}
|
|
|
],
|
|
|
series: series
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
function c2() {
|
|
|
|
|
|
axios.all([
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "login_num_all",
|
|
|
"query_param": []
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"year_name"
|
|
|
]
|
|
|
}
|
|
|
}),
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "login_times_all",
|
|
|
"query_param": [
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"year_name",
|
|
|
"social_name"
|
|
|
]
|
|
|
}
|
|
|
|
|
|
})
|
|
|
]).then(axios.spread(function (loginNumLineData, loginNumBarData) {
|
|
|
|
|
|
const loginNumLine = JSON.parse(loginNumLineData.data.result)
|
|
|
const loginNumBar = JSON.parse(loginNumBarData.data.result)
|
|
|
const xAxisName = loginNumLine.groups[0]
|
|
|
const legendData = ['登录人数', ...loginNumBar.groups[1]]
|
|
|
// 循环显示柱形图。
|
|
|
let loginNum = []
|
|
|
loginNumBar.groups[1].map((e, i) => {
|
|
|
loginNum.push({
|
|
|
name: e,
|
|
|
type: 'bar',
|
|
|
data: loginNumBar.datas[i],
|
|
|
barMaxWidth: 20,
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
const lineData = loginNumLine.datas[0]
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('c2')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
|
|
|
color: ["#FFFF80", "#FF6E76", "#4992FF", "#3FDB94", "#FF6E76"],
|
|
|
legend: {
|
|
|
data: legendData,
|
|
|
top: 10,
|
|
|
itemWidth: 8,
|
|
|
itemHeight: 8,
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xAxisName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
// dataZoom: [
|
|
|
// {
|
|
|
// type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
|
|
|
// xAxisIndex: 0, //显示x轴滑块
|
|
|
// height: "15px",
|
|
|
// end: 30,
|
|
|
// }
|
|
|
// ],
|
|
|
series: [
|
|
|
{
|
|
|
name: '登录人数',
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
data: lineData,
|
|
|
symbolSize: 2,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
lineStyle: {
|
|
|
width: 1// 0.1的线条是非常细的了
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
...loginNum
|
|
|
]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
|
|
|
|
|
|
}));
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function c3() {
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "social_topic_chart_all",
|
|
|
"query_param": [
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"topic_name"
|
|
|
]
|
|
|
}
|
|
|
}).then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
const pieData = []
|
|
|
resData.groups[0].map((e, i) => {
|
|
|
pieData.push({
|
|
|
name: e,
|
|
|
value: resData.datas[0][i]
|
|
|
})
|
|
|
})
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('c3')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
|
|
|
grid: {
|
|
|
left: 0,
|
|
|
top: 0,
|
|
|
right: 0,
|
|
|
bottom: 0
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
name: '主题活动',
|
|
|
type: 'pie',
|
|
|
radius: '50%',
|
|
|
data: pieData
|
|
|
},
|
|
|
|
|
|
]
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
function r1() {
|
|
|
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "login_support_total_all",
|
|
|
"query_param": [
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total",
|
|
|
"total2"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"org_name"
|
|
|
]
|
|
|
}
|
|
|
}).then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
const xAxisName = resData.groups[0]
|
|
|
let fwSum = 0
|
|
|
let gzSum = 0
|
|
|
resData.datas[0].map((e) => {
|
|
|
fwSum += Number(e)
|
|
|
})
|
|
|
resData.datas2[0].map((e) => {
|
|
|
gzSum += Number(e)
|
|
|
})
|
|
|
|
|
|
$("#fwSum").html(fwSum)
|
|
|
$("#gzSum").html(gzSum)
|
|
|
var myChart = echarts.init(document.getElementById('r1')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
grid: {
|
|
|
right: 10,
|
|
|
top: 20,
|
|
|
bottom: 95,
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
|
|
|
legend: {
|
|
|
data: ['访客数量', '关注情况'],
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xAxisName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
rotate: 30,
|
|
|
fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
|
|
|
xAxisIndex: 0, //显示x轴滑块
|
|
|
height: "15px",
|
|
|
end: 80,
|
|
|
top: "83%"
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: '访客数量',
|
|
|
type: 'line',
|
|
|
data: resData.datas[0]
|
|
|
},
|
|
|
{
|
|
|
name: '关注情况',
|
|
|
type: 'line',
|
|
|
data: resData.datas2[0]
|
|
|
}
|
|
|
|
|
|
]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
function l1() {
|
|
|
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "stage_login_num_all",
|
|
|
"query_param": [
|
|
|
"1"
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "echarts",
|
|
|
"query_group": [
|
|
|
"org_name",
|
|
|
"social_name"
|
|
|
]
|
|
|
}
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
|
|
|
const xAxisName = resData.groups[0]
|
|
|
const legendData = resData.groups[1]
|
|
|
|
|
|
let series = []
|
|
|
resData.groups[1].map((e, i) => {
|
|
|
series.push({
|
|
|
name: e,
|
|
|
type: 'bar',
|
|
|
data: resData.datas[i],
|
|
|
barMaxWidth: 20,
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
// ===========================================
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('l1')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
grid: {
|
|
|
top: 30,
|
|
|
bottom: 95,
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
|
|
|
legend: {
|
|
|
data: legendData,
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xAxisName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
rotate: 30,
|
|
|
fontSize: 10
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
|
|
|
xAxisIndex: 0, //显示x轴滑块
|
|
|
height: "15px",
|
|
|
end: 80,
|
|
|
top: "90%"
|
|
|
}
|
|
|
],
|
|
|
series: series
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
