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
|
||
}
|
||
|