$(function () { const axiosConf = { url: config_serverIp + "/dataex/report/QuerySimpleGP", method: 'post' }; // 标题增加年份 l1(); l2(); c1(); c2(); c3(); r1(); r2(); 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].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, }) }) // =========================================== 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%" } ], series: series }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }) } function l2() { 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; }) xuekeFil.map((e, index) => { console.log(e, 'e'); let num = 0 resData.map((item, i) => { if (item.social_typename == e.name) { num += Number(item.total) } }) $("#num" + i).html(fwSum) console.log(num, 'num'); }) }) } 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, }) }) 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: 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 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_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].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); // 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: 20, data: legendData, itemWidth: 8, itemHeight: 8, right: 20, textStyle: { color: '#01DFF4' }, }, yAxis: [ { type: 'category', data: xAxisName, 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(); }); }) } })