$(function () {
let time = "all"
let l1_xueduan = "0"
let l1_type = 1
let l2_xueduan = "0"
let r2_xueduan = "0"
let c1_xueduan = "0"
// 标题增加年份
r1(time);
r2(r2_xueduan, time);
// 时间切换
$('body').on('click', '#switch_month', function (e) {
time = "day";
$('.switch-time a').removeClass('act')
$('#switch_month').addClass("act")
l1(l1_xueduan, l1_type, time)
l2(time);
c1(c1_xueduan, time)
c2(time);
c3(time);
c3table(time)
r1(time);
r2(r2_xueduan, time);
})
// 人数、次数切换
$('body').on('click', '#switch_year', function (e) {
time = "month"
$('.switch-time a').removeClass('act')
$('#switch_year').addClass("act")
l1(l1_xueduan, l1_type, time)
l2(time);
c1(c1_xueduan, time)
c2(time);
c3(time);
c3table(time)
r1(time);
r2(r2_xueduan, time);
})
$('body').on('click', '#switch_all', function (e) {
time = "all"
$('.switch-time a').removeClass('act')
$('#switch_all').addClass("act")
l1(l1_xueduan, l1_type, time)
l2(time);
c1(c1_xueduan, time)
c2(time);
c3(time);
c3table(time)
r1(time);
r2(r2_xueduan, time);
})
// l1 学校空间访问情况监测 切换
//学段切换
$('#djfwqkxz').on('change', function () {
l1_xueduan = $(this).val() + ""
l1(l1_xueduan, l1_type, time)
})
$('#l1_loginrs').on('click', function () {
$('#l1_xuezhi').children().removeClass("act")
$('#l1_loginrs').addClass("act")
l1_type = 1
l1(l1_xueduan, l1_type, time)
})
$('#l1_logincs').on('click', function () {
$('#l1_xuezhi').children().removeClass("act")
$('#l1_logincs').addClass("act")
l1_type = 2
l1(l1_xueduan, l1_type, time)
})
l1(l1_xueduan, l1_type, time);
function l1(xueduan, type, time) {
var myChart = echarts.init(document.getElementById('l1')); // 各阶段学校数量
myChart.showLoading(chartsLoadindStyle);
if (type == 1 && time == "all") {
query_id = "stage_login_num_all"
query_param = [xueduan, xueduan]
} else if (type == 2 && time == "all") {
query_id = "stage_login_times_all"
query_param = [xueduan, xueduan]
} else if (type == 1 && time == "month") {
query_id = "stage_login_times_month"
query_param = [xueduan, xueduan, nowYear]
} else if (type == 2 && time == "month") {
query_id = "stage_login_times_month"
query_param = [xueduan, xueduan, nowYear]
} else if (type == 1 && time == "day") {
query_id = "stage_login_num_day"
query_param = [xueduan, xueduan, nowYear, nowMonth]
} else if (type == 2 && time == "day") {
query_id = "stage_login_times_day"
query_param = [xueduan, xueduan, nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"org_name",
"social_name"
]
}
})
.then((response) => {
const resData = JSON.parse(response.data.result)
let legendData = []
let xAxisName = []
let series = [{
type: 'bar',
data: [],
}]
let dataZoomShow = {
show: false
}
if (!resData.datas) {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
} else {
xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
legendData = ["教师", "学生"]
resData.groups[1].map((e, i) => {
series.push({
name: e,
type: 'bar',
data: resData.datas[i],
barMaxWidth: 20,
})
})
if (xAxisName.length > 15) {
dataZoomShow = {
show: true,
}
} else {
dataZoomShow = {
show: false,
end: 100
}
}
myChart.hideLoading();
}
// ===========================================
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,
color: "white",
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
}
],
dataZoom: [
{
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
xAxisIndex: 0, //显示x轴滑块
height: "15px",
end: 80,
top: "90%",
...dataZoomShow
}
],
series: series
};
myChart.setOption(option);
}).catch(() => {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
})
// 使用刚指定的配置项和数据显示图表。
window.addEventListener("resize", function () {
myChart.resize();
});
}
// l2 空间资源建设情况统计
l2(time);
function l2(time) {
if (time === "all") {
query_id = "post_total_all"
query_param = []
} else if (time === "month") {
query_id = "post_total_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "post_total_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"social_typename",
"social_name"
]
}
})
.then((response) => {
let resData = []
if (response.data.result == "") {
resData = [{ social: 'student', social_name: '学生', social_type: '1', social_typename: '文章', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '1', social_typename: '文章', total: '0' },
{ social: 'student', social_name: '学生', social_type: '2', social_typename: '相册', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '2', social_typename: '相册', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '4', social_typename: '主题活动', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '5', social_typename: '留言', total: '0' },
{ social: 'student', social_name: '学生', social_type: '5', social_typename: '留言', total: '0' }]
} else {
resData = JSON.parse(response.data.result)
// 获取学科
}
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) => {
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
// $("#" + "num" + Number(index + 1)).html(num)
})
resData.map((item) => {
if (item.social_type == 1 && item.social_name == "教师") {
let w = allNum[0] ? (item.total / allNum[0] * 100).toFixed(2) : 0
$("#wenzhangTNum").html(item.total);
$("#wenzhangTAcc").html(w + "%");
$("#wenzhangTloading").animate({ width: w + "%" });
}
if (item.social_type == 1 && item.social_name == "学生") {
let w = allNum[0] ? (item.total / allNum[0] * 100).toFixed(2) : 0
$("#wenzhangSNum").html(item.total)
$("#wenzhangSAcc").html(w + "%");
$("#wenzhangSloading").animate({ width: w + "%" });
}
if (item.social_type == 2 && item.social_name == "教师") {
let w = allNum[1] ? (item.total / allNum[1] * 100).toFixed(2) : 0
$("#xiangceTNum").html(item.total);
$("#xiangceTAcc").html(w + "%");
$("#xiangceTloading").animate({ width: w + "%" });
}
if (item.social_type == 2 && item.social_name == "学生") {
let w = allNum[1] ? (item.total / allNum[1] * 100).toFixed(2) : 0
$("#xiangceSNum").html(item.total)
$("#xiangceSAcc").html(w + "%");
$("#xiangceSloading").animate({ width: w + "%" });
}
if (item.social_type == 4 && item.social_name == "教师") {
let w = allNum[2] ? (item.total / allNum[2] * 100).toFixed(2) : 0
$("#liuyanTNum").html(item.total);
$("#liuyanTAcc").html(w + "%");
$("#liuyanTloading").animate({ width: w + "%" });
}
if (item.social_type == 4 && item.social_name == "学生") {
let w = allNum[2] ? (item.total / allNum[2] * 100).toFixed(2) : 0
$("#liuyanSNum").html(item.total)
$("#liuyanSAcc").html(w + "%");
$("#liuyanSloading").animate({ width: w + "%" });
}
if (item.social_type == 5 && item.social_name == "教师") {
let w = allNum[3] ? (item.total / allNum[3] * 100).toFixed(2) : 0
$("#huodongTNum").html(item.total);
$("#huodongTAcc").html(w + "%");
$("#huodongTloading").animate({ width: w + "%" });
}
if (item.social_type == 5 && item.social_name == "学生") {
let w = allNum[3] ? (item.total / allNum[3] * 100).toFixed(2) : 0
$("#huodongSNum").html(item.total)
$("#huodongSAcc").html(w + "%");
$("#huodongSloading").animate({ width: w + "%" });
}
})
}).catch(() => {
resData = [{ social: 'student', social_name: '学生', social_type: '1', social_typename: '文章', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '1', social_typename: '文章', total: '0' },
{ social: 'student', social_name: '学生', social_type: '2', social_typename: '相册', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '2', social_typename: '相册', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '4', social_typename: '主题活动', total: '0' },
{ social: 'teacher', social_name: '教师', social_type: '5', social_typename: '留言', total: '0' },
{ social: 'student', social_name: '学生', social_type: '5', social_typename: '留言', total: '0' }]
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) => {
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
// $("#" + "num" + Number(index + 1)).html(num)
})
resData.map((item) => {
if (item.social_type == 1 && item.social_name == "教师") {
let w = allNum[0] ? (item.total / allNum[0] * 100).toFixed(2) : 0
$("#wenzhangTNum").html(item.total);
$("#wenzhangTAcc").html(w + "%");
$("#wenzhangTloading").animate({ width: w + "%" });
}
if (item.social_type == 1 && item.social_name == "学生") {
let w = allNum[0] ? (item.total / allNum[0] * 100).toFixed(2) : 0
$("#wenzhangSNum").html(item.total)
$("#wenzhangSAcc").html(w + "%");
$("#wenzhangSloading").animate({ width: w + "%" });
}
if (item.social_type == 2 && item.social_name == "教师") {
let w = allNum[1] ? (item.total / allNum[1] * 100).toFixed(2) : 0
$("#xiangceTNum").html(item.total);
$("#xiangceTAcc").html(w + "%");
$("#xiangceTloading").animate({ width: w + "%" });
}
if (item.social_type == 2 && item.social_name == "学生") {
let w = allNum[1] ? (item.total / allNum[1] * 100).toFixed(2) : 0
$("#xiangceSNum").html(item.total)
$("#xiangceSAcc").html(w + "%");
$("#xiangceSloading").animate({ width: w + "%" });
}
if (item.social_type == 4 && item.social_name == "教师") {
let w = allNum[2] ? (item.total / allNum[2] * 100).toFixed(2) : 0
$("#liuyanTNum").html(item.total);
$("#liuyanTAcc").html(w + "%");
$("#liuyanTloading").animate({ width: w + "%" });
}
if (item.social_type == 4 && item.social_name == "学生") {
let w = allNum[2] ? (item.total / allNum[2] * 100).toFixed(2) : 0
$("#liuyanSNum").html(item.total)
$("#liuyanSAcc").html(w + "%");
$("#liuyanSloading").animate({ width: w + "%" });
}
if (item.social_type == 5 && item.social_name == "教师") {
let w = allNum[3] ? (item.total / allNum[3] * 100).toFixed(2) : 0
$("#huodongTNum").html(item.total);
$("#huodongTAcc").html(w + "%");
$("#huodongTloading").animate({ width: w + "%" });
}
if (item.social_type == 5 && item.social_name == "学生") {
let w = allNum[3] ? (item.total / allNum[3] * 100).toFixed(2) : 0
$("#huodongSNum").html(item.total)
$("#huodongSAcc").html(w + "%");
$("#huodongSloading").animate({ width: w + "%" });
}
})
})
}
// c1 学校主题活动开展情况监测
//学段切换
$('#c1_xueduan').on('change', function () {
c1_xueduan = $(this).val() + ""
c1(c1_xueduan, time)
})
c1(c1_xueduan, time);
function c1(xueduan, time) {
var myChart = echarts.init(document.getElementById('c1')); // 各阶段学校数量
myChart.showLoading(chartsLoadindStyle);
if (time === "all") {
query_id = "stage_org_social_all"
query_param = [xueduan, xueduan]
} else if (time === "month") {
query_id = "stage_org_social_month"
query_param = [xueduan, xueduan, nowYear]
} else if (time === "day") {
query_id = "stage_org_social_day"
query_param = [xueduan, xueduan, nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"org_name",
"topic_name"
]
}
})
.then((response) => {
const resData = JSON.parse(response.data.result)
let xAxisName = []
let legendData = []
let series = []
let dataZoom = {}
if (!resData.datas) {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
dataZoom = {
show: false
}
} else {
xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
legendData = resData.groups[1]
resData.groups[1].map((e, i) => {
series.push({
name: e,
type: 'bar',
stack: "all",
data: resData.datas[i],
barMaxWidth: 40,
})
})
dataZoom =
{
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
xAxisIndex: 0, //显示x轴滑块
height: "15px",
end: 80,
top: "90%"
}
myChart.hideLoading();
}
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,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#01DFF4'
},
},
xAxis: [
{
type: 'category',
data: xAxisName,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
interval: 0,
fontSize: 10,
rotate: "35",
color: "white",
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
},
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
}
],
dataZoom: dataZoom,
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}).catch(() => {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
dataZoom = {
show: false
}
})
}
c2(time);
function c2(time) {
var myChart = echarts.init(document.getElementById('c2')); // 各阶段学校数量
myChart.showLoading(chartsLoadindStyle);
let danwei = ""
if (time === "all") {
query_id1 = "login_num_all"
query_id2 = "login_times_all"
query_param = []
query_group1 = ["year_name"]
query_group2 = ["year_name", "social_name"]
danwei = "年"
} else if (time === "month") {
query_id1 = "login_num_month"
query_id2 = "login_times_month"
query_param = [nowYear]
query_group1 = ["month_name"]
query_group2 = ["month_name", "social_name"]
danwei = "月"
} else if (time === "day") {
query_id1 = "login_num_day"
query_id2 = "login_times_day"
query_param = [nowYear, nowMonth]
query_group1 = ["day_name"]
query_group2 = ["day_name", "social_name"]
danwei = "日"
}
axios.all([
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id1,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": query_group1
}
}),
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id2,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": query_group2
}
})
]).then(axios.spread(function (loginNumLineData, loginNumBarData) {
const loginNumLine = JSON.parse(loginNumLineData.data.result)
let loginNumBar = JSON.parse(loginNumBarData.data.result)
let xAxisName = []
let legendData = ['登录人数', '教师登录次数', '学生登录次数']
let loginNum = []
let lineData = []
if (!loginNumLine.datas) {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
} else {
xAxisName = loginNumLine.groups[0]
legendData = ['登录人数', '教师登录次数', '学生登录次数']
lineData = loginNumLine.datas[0]
// 循环显示柱形图。
loginNumBar.groups[1].map((e, i) => {
loginNum.push({
name: e,
type: 'bar',
data: loginNumBar.datas[i],
barMaxWidth: 20,
})
})
myChart.hideLoading();
}
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
textStyle: {
color: '#01DFF4'
},
grid: {
top: 35,
bottom: 30,
left: 50
},
color: ["#FFFF80", "#FF6E76", "#4992FF", "#3FDB94", "#FF6E76"],
legend: {
data: legendData,
top: 10,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#01DFF4'
},
},
xAxis: [
{
name: danwei,
nameTextStyle: {
height: 150,
padding: [-40, 0, 0, -10] // 四个数字分别为上右下左与原位置距离
},
type: 'category',
data: xAxisName,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
color: "white",
// formatter: "{value}" + danwei
},
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
},
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
splitLine: {//分割线配置
lineStyle: {
show: false,
color: "#010d5f",
}
},
}
],
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();
});
})).catch(() => {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
})
}
c3(time);
function c3(time = "all") {
var myChart = echarts.init(document.getElementById('c3')); // 各阶段学校数量
myChart.showLoading(chartsLoadindStyle);
if (time === "all") {
query_id = "social_topic_chart_all"
query_param = []
} else if (time === "month") {
query_id = "social_topic_chart_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "social_topic_chart_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"topic_name"
]
}
}).then((response) => {
const resData = JSON.parse(response.data.result)
let series = []
if (!resData.datas) {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
} else {
const pieData = []
resData.groups[0].map((e, i) => {
pieData.push({
name: e,
value: resData.datas[0][i]
})
})
series = {
name: '主题活动',
type: 'pie',
radius: '50%',
data: pieData,
label: {
fontSize: 9,
color: "white",
border: 0,
}
}
myChart.hideLoading();
}
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
},
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}).catch(() => {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
})
}
c3table(time)
function c3table(time) {
if (time === "all") {
query_id = "social_played_top5_all"
query_param = []
} else if (time === "month") {
query_id = "social_played_top5_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "social_played_top5_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"social_name",
"topic_name"
]
}
})
.then((response) => {
console.log(response);
let phHtml = ""
if (response.data.result == "") {
phHtml = `| 暂无数据 |
`
} else {
const resData = JSON.parse(response.data.result)
console.log(resData);
resData.map((e, i) => {
phHtml += `
| ${e.topic_name} |
${e.social_name} |
${e.total} |
`
})
}
$("#huodongtable").html(phHtml)
}).catch(() => {
$("#huodongtable").html(`| 暂无数据 |
`)
})
}
function r1(time) {
var myChart = echarts.init(document.getElementById('r1')); // 各阶段学校数量
myChart.showLoading(chartsLoadindStyle);
if (time === "all") {
query_id = "login_support_total_all"
query_param = []
} else if (time === "month") {
query_id = "login_support_total_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "login_support_total_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": 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)
let xAxisName = []
let fwSum = 0
let gzSum = 0
let data1 = []
let data2 = []
let dataZoom = {}
if (!resData.datas) {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
$("#fwSum").html(fwSum)
$("#gzSum").html(gzSum)
dataZoom = {
show: false
}
} else {
xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
data1 = resData.datas[0]
data2 = resData.datas2[0]
resData.datas[0].map((e) => {
fwSum += Number(e)
})
resData.datas2[0].map((e) => {
gzSum += Number(e)
})
$("#fwSum").html(fwSum)
$("#gzSum").html(gzSum)
dataZoom = {
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
xAxisIndex: 0, //显示x轴滑块
height: "15px",
end: 80,
top: "85%"
}
myChart.hideLoading();
}
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,
color: "white",
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
}
],
dataZoom: dataZoom,
series: [
{
name: '访客数量',
type: 'line',
data: data1
},
{
name: '关注情况',
type: 'line',
data: data2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}).catch(() => {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
$("#fwSum").html(fwSum)
$("#gzSum").html(gzSum)
dataZoom = {
show: false
}
})
}
// r2 学校主题活动开展情况监测
//学段切换
$('#kjjshyd').on('change', function () {
r2_xueduan = $(this).val() + ""
r2(r2_xueduan, time);
})
function r2(xueduan, time) {
var myChart = echarts.init(document.getElementById('r2')); // 各阶段学校数量
myChart.showLoading(chartsLoadindStyle);
if (time === "all") {
query_param = [xueduan, xueduan, xueduan, xueduan,]
query_param1 = [xueduan, xueduan]
} else if (time === "month") {
query_param = [xueduan, xueduan, nowYear, xueduan, xueduan, nowYear]
query_param1 = [xueduan, xueduan, nowYear]
} else if (time === "day") {
query_param = [xueduan, xueduan, nowYear, nowMonth, xueduan, xueduan, nowYear, nowMonth]
query_param1 = [xueduan, xueduan, nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "stage_liveness_" + time,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"org_name",
"social_typename"
]
}
}).then((response) => {
const resData = JSON.parse(response.data.result)
let legendData = []
let xAxisName = []
let series = []
if (!resData.datas) {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
} else {
xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
legendData = resData.groups[1]
resData.groups[1].map((e, i) => {
series.push({
name: e,
type: 'bar',
data: resData.datas[i],
barMaxWidth: 20,
})
})
myChart.hideLoading();
}
console.log(series, '111');
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,
color: "white",
}
}
],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}).catch(() => {
myChart.showLoading(chartsLoadindNodataStyle);
myChart.clear()
})
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "stage_liveness_total_" + time,
"query_param": query_param1
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"org_name"
]
}
}).then((response) => {
let phHtml = ""
if (response.data.result == "") {
$("#huoyuedu").html(phHtml)
} else {
const resData = JSON.parse(response.data.result)
resData.map((e, i) => {
phHtml += `
${e.total}
活跃度
`
})
$("#huoyuedu").html(phHtml)
}
}).catch(() => {
$("#huoyuedu").html("")
})
}
})