|
|
|
|
|
$(function () {
|
|
|
|
|
|
const axiosConf = { url: config_serverIp + "/dataex/report/QuerySimpleGP", method: 'post' };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 标题增加年份
|
|
|
l1(1);
|
|
|
l2();
|
|
|
c1();
|
|
|
c2();
|
|
|
c3();
|
|
|
r1();
|
|
|
r2();
|
|
|
c3table()
|
|
|
|
|
|
$("#kjFangwenSelect").select(function () {
|
|
|
console.log(111);
|
|
|
})
|
|
|
$("input").select(function () {
|
|
|
$("input").after("文本已选中!");
|
|
|
});
|
|
|
|
|
|
|
|
|
$('#djfwqkxz').on('change', function (e) {
|
|
|
console.log($(this).val());
|
|
|
l1($(this).val())
|
|
|
})
|
|
|
|
|
|
|
|
|
function l1(xuezhi, time) {
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "stage_login_num_all",
|
|
|
"query_param": [
|
|
|
xuezhi + ""
|
|
|
]
|
|
|
},
|
|
|
"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].map((e, i) => {
|
|
|
return e.replace("唐山市", "")
|
|
|
})
|
|
|
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,
|
|
|
})
|
|
|
|
|
|
})
|
|
|
let dataZoomShow = {}
|
|
|
if (xAxisName.length > 15) {
|
|
|
dataZoomShow = {
|
|
|
show: true,
|
|
|
}
|
|
|
} else {
|
|
|
dataZoomShow = {
|
|
|
show: false,
|
|
|
end: 100
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ===========================================
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('l1')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
grid: {
|
|
|
top: 50,
|
|
|
right: 10,
|
|
|
bottom: 80,
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
|
|
|
legend: {
|
|
|
data: legendData,
|
|
|
itemWidth: 8,
|
|
|
itemHeight: 8,
|
|
|
right: 10,
|
|
|
top: 10,
|
|
|
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: "95%",
|
|
|
...dataZoomShow
|
|
|
}
|
|
|
],
|
|
|
series: series
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
function l2(time) {
|
|
|
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "post_total_all",
|
|
|
"query_param": [
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "json",
|
|
|
"query_group": [
|
|
|
"social_typename",
|
|
|
"social_name"
|
|
|
]
|
|
|
}
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
// console.log(resData, 'resData');
|
|
|
// 获取学科
|
|
|
const xueke = [];
|
|
|
|
|
|
resData.map((item) => {
|
|
|
xueke.push({ id: item.social_type, name: item.social_typename, total: item.total });
|
|
|
})
|
|
|
|
|
|
// 去重
|
|
|
xuekeFil = xueke.filter((item, index) => {
|
|
|
return xueke.findIndex(_item => _item.id == item.id) == index;
|
|
|
})
|
|
|
let allNum = []
|
|
|
xuekeFil.map((e, index) => {
|
|
|
|
|
|
// console.log(e, 'e');
|
|
|
let num = 0
|
|
|
xuekeFil.children = []
|
|
|
resData.map((item, i) => {
|
|
|
if (item.social_typename == e.name) {
|
|
|
num += Number(item.total)
|
|
|
}
|
|
|
})
|
|
|
$("#" + "num" + Number(index + 1)).html(num)
|
|
|
allNum.push(num)
|
|
|
xuekeFil[index].total = num
|
|
|
// console.log(num, 'num', "#" + "num" + Number(index) + 1);
|
|
|
// $("#" + "num" + Number(index + 1)).html(num)
|
|
|
})
|
|
|
resData.map((item) => {
|
|
|
if (item.social_type == 1 && item.social_name == "教师") {
|
|
|
const w = (item.total / allNum[0] * 100).toFixed(2) + "%"
|
|
|
$("#wenzhangTNum").html(item.total);
|
|
|
$("#wenzhangTAcc").html(w);
|
|
|
$("#wenzhangTloading").animate({ width: w });
|
|
|
}
|
|
|
if (item.social_type == 1 && item.social_name == "学生") {
|
|
|
const w = (item.total / allNum[0] * 100).toFixed(2) + "%"
|
|
|
$("#wenzhangSNum").html(item.total)
|
|
|
$("#wenzhangSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
|
|
|
$("#wenzhangSloading").animate({ width: w });
|
|
|
}
|
|
|
|
|
|
if (item.social_type == 2 && item.social_name == "教师") {
|
|
|
const w = (item.total / allNum[1] * 100).toFixed(2) + "%"
|
|
|
$("#xiangceTNum").html(item.total);
|
|
|
$("#xiangceTAcc").html(w);
|
|
|
$("#xiangceTloading").animate({ width: w });
|
|
|
}
|
|
|
if (item.social_type == 2 && item.social_name == "学生") {
|
|
|
const w = (item.total / allNum[1] * 100).toFixed(2) + "%"
|
|
|
$("#xiangceSNum").html(item.total)
|
|
|
$("#xiangceSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
|
|
|
$("#xiangceSloading").animate({ width: w });
|
|
|
}
|
|
|
|
|
|
if (item.social_type == 4 && item.social_name == "教师") {
|
|
|
const w = (item.total / allNum[2] * 100).toFixed(2) + "%"
|
|
|
$("#liuyanTNum").html(item.total);
|
|
|
$("#liuyanTAcc").html(w);
|
|
|
$("#liuyanTloading").animate({ width: w });
|
|
|
}
|
|
|
if (item.social_type == 4 && item.social_name == "学生") {
|
|
|
const w = (item.total / allNum[2] * 100).toFixed(2) + "%"
|
|
|
$("#liuyanSNum").html(item.total)
|
|
|
$("#liuyanSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
|
|
|
$("#liuyanSloading").animate({ width: w });
|
|
|
}
|
|
|
|
|
|
if (item.social_type == 5 && item.social_name == "教师") {
|
|
|
const w = (item.total / allNum[3] * 100).toFixed(2) + "%"
|
|
|
$("#huodongTNum").html(item.total);
|
|
|
$("#huodongTAcc").html(w);
|
|
|
$("#huodongTloading").animate({ width: w });
|
|
|
}
|
|
|
if (item.social_type == 5 && item.social_name == "学生") {
|
|
|
const w = (item.total / allNum[3] * 100).toFixed(2) + "%"
|
|
|
$("#huodongSNum").html(item.total)
|
|
|
$("#huodongSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
|
|
|
$("#huodongSloading").animate({ width: w });
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
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].map((e, i) => {
|
|
|
return e.replace("唐山市", "")
|
|
|
})
|
|
|
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,
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('c1')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
grid: {
|
|
|
top: 55,
|
|
|
bottom: 80,
|
|
|
right: 10
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94", "#4992FF", "#FF6E76"],
|
|
|
legend: {
|
|
|
data: legendData,
|
|
|
top: 15,
|
|
|
right: 10,
|
|
|
itemWidth: 8,
|
|
|
itemHeight: 8,
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xAxisName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
fontSize: 10,
|
|
|
rotate: "35"
|
|
|
}
|
|
|
},
|
|
|
|
|
|
],
|
|
|
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: "95%"
|
|
|
}
|
|
|
],
|
|
|
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'
|
|
|
},
|
|
|
grid: {
|
|
|
top: 35,
|
|
|
bottom: 30
|
|
|
},
|
|
|
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' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
splitLine: {//分割线配置
|
|
|
lineStyle: {
|
|
|
show: false,
|
|
|
color: "#010d5f",
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
],
|
|
|
// 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 c3table() {
|
|
|
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "social_played_top5_all",
|
|
|
"query_param": [
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [
|
|
|
"total"
|
|
|
],
|
|
|
"query_format": "json",
|
|
|
"query_group": [
|
|
|
"social_name",
|
|
|
"topic_name"
|
|
|
]
|
|
|
}
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const resData = JSON.parse(response.data.result)
|
|
|
console.log(resData, 'resData');
|
|
|
let phHtml = ""
|
|
|
resData.map((e, i) => {
|
|
|
phHtml += `
|
|
|
<tr>
|
|
|
<td class="tg-0pky">${e.topic_name}</td>
|
|
|
<td class="tg-0pky" style="max-width: 110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${e.social_name}</td>
|
|
|
<td class="tg-0pky">${e.total}</td>
|
|
|
</tr>`
|
|
|
})
|
|
|
$("#huodongtable").html(phHtml)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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].map((e, i) => {
|
|
|
return e.replace("唐山市", "")
|
|
|
})
|
|
|
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: 50,
|
|
|
bottom: 80,
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
|
|
|
legend: {
|
|
|
data: ['访客数量', '关注情况'],
|
|
|
itemWidth: 8,
|
|
|
itemHeight: 8,
|
|
|
right: 10,
|
|
|
top: 15,
|
|
|
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: [
|
|
|
{
|
|
|
name: '访客数量',
|
|
|
type: 'line',
|
|
|
data: resData.datas[0]
|
|
|
},
|
|
|
{
|
|
|
name: '关注情况',
|
|
|
type: 'line',
|
|
|
data: resData.datas2[0]
|
|
|
}
|
|
|
|
|
|
]
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
function r2() {
|
|
|
|
|
|
|
|
|
axios({
|
|
|
...axiosConf,
|
|
|
data: {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "stage_liveness_all",
|
|
|
"query_param": [
|
|
|
"1",
|
|
|
"1"
|
|
|
]
|
|
|
},
|
|
|
"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].map((e, i) => {
|
|
|
return e.replace("唐山市", "")
|
|
|
})
|
|
|
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");
|
|
|
resData.datas2[0].map((e, i) => {
|
|
|
console.log(e, i);
|
|
|
$("#" + "huodongnum" + Number(i + 1)).html(e)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// console.log("xAxisName", xAxisName);
|
|
|
// console.log("legendData", legendData);
|
|
|
// console.log("series", series);
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('r2')); // 各阶段学校数量
|
|
|
option = {
|
|
|
// height: "100px",
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
grid: {
|
|
|
top: 50,
|
|
|
bottom: 50,
|
|
|
left: 100
|
|
|
},
|
|
|
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
|
|
|
legend: {
|
|
|
top: 10,
|
|
|
data: legendData,
|
|
|
itemWidth: 8,
|
|
|
itemHeight: 8,
|
|
|
right: 20,
|
|
|
textStyle: {
|
|
|
color: '#01DFF4'
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
data: xAxisName,
|
|
|
inverse: true,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
fontSize: 10
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#01DFF4' //更改坐标轴颜色
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
fontSize: 14
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: series
|
|
|
};
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
