337 lines
11 KiB
JavaScript
337 lines
11 KiB
JavaScript
|
import { schoolScopeList } from "./centerPage.js";
|
|||
|
|
import { starRatingGetbonusList } from "./index.js";
|
|||
|
|
let trendChartChart=null;
|
|||
|
|
function drawStarRatingTotalChart(data,type){
|
|||
|
|
return {
|
|||
|
|
color: ['#07b31f', '#e0f00b', ' #f0080d','#7C7F73','#867C77'],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '14%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '80px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 4,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number}`,
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text: ``, // \n 换行
|
|||
|
|
subtext:type, // 子标题
|
|||
|
|
top: '29%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['26%', '55%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function drawSchoolYearScopeChart(timeData,valueData){
|
|||
|
|
var options={
|
|||
|
|
color: ['#fff'],
|
|||
|
|
grid: { // 图表位置
|
|||
|
|
top: '25px',
|
|||
|
|
left: '50px',
|
|||
|
|
right: '50px',
|
|||
|
|
bottom: '50px'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',//指示类型
|
|||
|
|
},
|
|||
|
|
// axisPointer: {
|
|||
|
|
// type: 'cross',//指示类型
|
|||
|
|
// label: {
|
|||
|
|
// // 横纵坐标指示区块颜色
|
|||
|
|
// backgroundColor: '#132f6d'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
formatter: (pamars) => {
|
|||
|
|
var name=pamars[0].name;
|
|||
|
|
var str=`<span style="font-size:16px;">${name}</span><br/>`;
|
|||
|
|
for(var i=0;i<schoolScopeList.length;i++){
|
|||
|
|
if(name==schoolScopeList[i]["schoolTime"]){
|
|||
|
|
str+=`
|
|||
|
|
评估时间:${schoolScopeList[i]["timestamp"]}<br/>
|
|||
|
|
校园安全:${schoolScopeList[i]["scoreInsideManage"]}/20<br />
|
|||
|
|
周边安全:${schoolScopeList[i]["scoreOutsideManage"]}/20<br />
|
|||
|
|
隐患整改:${schoolScopeList[i]["scoreRiskManage"]}/25<br />
|
|||
|
|
法制宣传:${schoolScopeList[i]["scoreLawEducation"]}/15<br />
|
|||
|
|
应急处置:${schoolScopeList[i]["scoreEmcManage"]}/20
|
|||
|
|
`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
|||
|
|
fontFamily:'myRegular',
|
|||
|
|
fontSize:14
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
// boundaryGap: false, // 不留白，从原点开始
|
|||
|
|
data:timeData,
|
|||
|
|
axisLine: { // 坐标轴
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#4c70ad'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: { // 网格线
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { // 网格线样式
|
|||
|
|
color: '#4c80ba',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: { // 刻度
|
|||
|
|
show: false // 控制刻度的显示与隐藏
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
splitNumber: 4, // 间隔数
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: { // 坐标轴
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#6490f1',
|
|||
|
|
padding: 500
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: { // 网格线
|
|||
|
|
show: true, // 显示隐藏 ture false
|
|||
|
|
lineStyle: { // 网格线样式
|
|||
|
|
color: '#4c80ba',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: { // 刻度
|
|||
|
|
show: false // 控制刻度的显示与隐藏
|
|||
|
|
},
|
|||
|
|
max:100,
|
|||
|
|
splitNumber:5,
|
|||
|
|
min:0
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data:valueData,
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth:40,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2, // 折线粗细
|
|||
|
|
color: '#45cdfa', // 折线颜色
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, //设置折线上圆点大小
|
|||
|
|
symbol: 'circle', // 设置标记的图形为circle
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true, // 在折线拐点上显示数据
|
|||
|
|
position:'top',
|
|||
|
|
formatter: (pamars) => {
|
|||
|
|
var value=pamars["value"]
|
|||
|
|
if(value>=95){
|
|||
|
|
var text=`五星`;
|
|||
|
|
}else if(value>=85){
|
|||
|
|
var text=`四星`;
|
|||
|
|
}else if(value>=75){
|
|||
|
|
var text=`三星`;
|
|||
|
|
}else if(value>=65){
|
|||
|
|
var text=`二星`;
|
|||
|
|
}else{
|
|||
|
|
var text=`一星`;
|
|||
|
|
}
|
|||
|
|
return `${text}(${value})`;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 柱状图渐变色
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(69, 176, 255, 0.2)'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#45B0FF'
|
|||
|
|
}]),
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
trendChartChart=echarts.init(document.getElementById("trendChartChart"));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
trendChartChart.setOption(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.onresize=function(e){
|
|||
|
|
if(trendChartChart!=null){
|
|||
|
|
trendChartChart.resize();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function drawSchoolBonusEchart(){
|
|||
|
|
var dataName=[]
|
|||
|
|
var dataValue=[]
|
|||
|
|
for(var i=0;i<starRatingGetbonusList.length;i++){
|
|||
|
|
var scoreBonus=Math.abs(parseFloat(starRatingGetbonusList[i]["scoreBonus"]/10));
|
|||
|
|
var station=starRatingGetbonusList[i]["station"];
|
|||
|
|
dataValue.push(scoreBonus)
|
|||
|
|
dataName.push(station)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var option={
|
|||
|
|
color: ['#fff'],
|
|||
|
|
grid: { // 图表位置
|
|||
|
|
top: '25%',
|
|||
|
|
left: '50px',
|
|||
|
|
right: '25px',
|
|||
|
|
bottom: '40px'
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: '加奖学校排名', // 主标题
|
|||
|
|
textStyle: { // 标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 15,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
fontSize:16,
|
|||
|
|
fontWeight:'bold',
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
top: '20px',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true, // 不留白，从原点开始
|
|||
|
|
data: dataName,
|
|||
|
|
|
|||
|
|
axisLine: { // 坐标轴
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#4d76b2'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0, // 为了让轴上显示全
|
|||
|
|
rotate: 15, //显示全后重叠，调整角度
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: { // 刻度
|
|||
|
|
show: false // 控制刻度的显示与隐藏
|
|||
|
|
},
|
|||
|
|
splitLine: { // 网格线
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
show: true, // 显示隐藏 ture false
|
|||
|
|
splitNumber: 5, // 间隔数
|
|||
|
|
max: 20,
|
|||
|
|
interval: 10 / 2,
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: { // 坐标轴
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#6490f1'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: { // 网格线
|
|||
|
|
show: true, // 显示隐藏 ture false
|
|||
|
|
lineStyle: { // 网格线样式
|
|||
|
|
color: '#4d76b2'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
data: dataValue,
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 15,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 柱状图渐变色
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#2575ca'
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#02B4FE'
|
|||
|
|
}]),
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
var mainContentR_top_info_echart=echarts.init(document.getElementById("mainContentR_top_info_echart"));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
mainContentR_top_info_echart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export {
|
|||
|
|
drawStarRatingTotalChart,
|
|||
|
|
drawSchoolYearScopeChart,
|
|||
|
|
drawSchoolBonusEchart
|
|||
|
|
}
|
|||
|
|
|