修改界面

master
夜笙歌 3 years ago
parent 0e3d40c2e8
commit 73db9b7a0f

@ -72,35 +72,6 @@ body {
top: 18.7%;
left: 26.7%;
}
.nivoSlider{
width: 100%;
height: 100%;
}
.HighlightOne{
/*width: 23vw;*/
/*height: 35vh;*/
width: 230px;
height: 350px;
}
.HighlightTwo{
/*width: 23vw;*/
/*height: 35vh;*/
width: 230px;
height: 350px;
}
.HighlightThree{
/*width: 23vw;*/
/*height: 35vh;*/
width: 230px;
height: 350px;
}
.HighlightFour{
/*width: 23vw;*/
/*height: 35vh;*/
width: 230px;
height: 350px;
}
.slide{
position: absolute;
width: 22%;

@ -26,7 +26,6 @@ $(() => {
}, document.getElementById("safe"), '')
})
autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
console.log(data)
pieChart(data.map((val,index) => {
if (index == 0 ) {
return {
@ -63,10 +62,6 @@ $(() => {
})
autoUpdate(url + "/selectHighlightProducts", 40000, data => {
let url = data.map(val => val.picturePath)
// $('#HighlightOne').css({backgroundImage: `url("http://10.100.70.5:9090/${url[0]}")`})
// $('#HighlightTwo').css({backgroundImage: `url("http://10.100.70.5:9090/${url[1]}")`})
// $('#HighlightThree').css({backgroundImage: `url("http://10.100.70.5:9090/${url[2]}")`})
// $('#HighlightFour').css({backgroundImage: `url("http://10.100.70.5:9090/${url[3]}")`})
$('#HighlightOne').attr("src" , `http://10.100.70.5:9090/${url[0]}`)
$('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`)
$('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`)
@ -107,7 +102,7 @@ $(() => {
lineChart({
xName: month.splice(0,value.length),
yData: value,
yDataName: "能耗百分比"
yDataName: "单台能耗(元/台)"
}, document.getElementById("energyConsumption"), '')
})

@ -279,7 +279,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
}
// 柱状+折线图
const barChartAndLineChart = function (data, id,rotate=0) {
const barChartAndLineChart = function (data, id, rotate = 0) {
let charts = echarts.init(id);
if (!data) {
data = {
@ -325,8 +325,8 @@ const barChartAndLineChart = function (data, id,rotate=0) {
},
},
axisLabel: {
rotate:rotate,
interval:0,
rotate: rotate,
interval: 0,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
@ -667,7 +667,7 @@ const barChartAndLineChartThree = function (data, id) {
},
},
axisLabel: {
interval:0,
interval: 0,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
@ -946,19 +946,22 @@ const barChartAndLineChartFour = function (data, id) {
}
// 折线图
const lineChart = function (data, id) {
const lineChart = function (data, id,unit='') {
let charts = echarts.init(id);
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
yDataName: "提升百分比"
yDataName: "提升百分比",
yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
yDataTwoName: "百分比"
}
}
let min = Math.ceil(Math.min(...data.yData))
let max = Math.ceil(Math.max(...data.yData))
let option = {
grid: {
top: '34%',
top: '20%',
left: '5%',
right: '5%',
bottom: '8%',
@ -976,13 +979,13 @@ const lineChart = function (data, id) {
legend: {
top: '5%',
textStyle: {
fontSize:0.75*vw,
fontSize: 0.75 * vw,
color: '#90cb5e',
},
},
xAxis: {
type: 'category',
data:data.xName,
data: data.xName,
axisLine: {
show: true,
},
@ -998,8 +1001,8 @@ const lineChart = function (data, id) {
},
yAxis: [
{
min:min - 2,
max:100,
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#393939',
@ -1018,6 +1021,7 @@ const lineChart = function (data, id) {
},
axisLabel: {
show: true,
formatter:`{c}${unit}`,
textStyle: {
color: '#ffffff',
},
@ -1043,7 +1047,7 @@ const lineChart = function (data, id) {
label: {
//图形上的文本标签
normal: {
formatter:'{c}%',
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@ -1056,6 +1060,37 @@ const lineChart = function (data, id) {
},
data: data.yData,
},
{
name: data.yDataTwoName,
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: '#5f3caf',
borderWidth: '2',
borderColor: '#462f84',
},
lineStyle: {
color: '#3094ea',
},
label: {
//图形上的文本标签
normal: {
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
color: "#3254b8",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.5 * vw,
},
},
},
data: data.yDataTwo,
},
],
};
@ -1065,9 +1100,8 @@ const lineChart = function (data, id) {
// 饼图
const pieChart = function (data, id,unit='次') {
const pieChart = function (data, id, unit = '次') {
let charts = echarts.init(id);
console.log(data)
if (!data) {
data = [
{
@ -1154,7 +1188,7 @@ const pieChart = function (data, id,unit='次') {
}
// 垂直柱状图
const verticalBarChart = function (data, id,unit='次') {
const verticalBarChart = function (data, id, unit = '次') {
let charts = echarts.init(id);
if (!data) {
data = {
@ -1514,7 +1548,7 @@ const multipleVerticalBarChart = function (data, id) {
charts.setOption(option);
$(window).resize(charts.resize);
}
const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
let charts = echarts.init(id);
if (!data) {
data = {
@ -1585,7 +1619,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
emphasis: {
focus: 'series'
},
barWidth:'30%',
barWidth: '30%',
itemStyle: {
//图形样式
normal: {
@ -1609,8 +1643,8 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
emphasis: {
focus: 'series'
},
barWidth:'30%',
barGap:'40%',
barWidth: '30%',
barGap: '40%',
label: {
show: true,
position: "top",
@ -1679,13 +1713,13 @@ const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
}
},
legend: {
data: [data.yDataOneName, data.yDataTwoName,data.yDataThreeName,data.yDataFourName],
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
dataZoom:[],
dataZoom: [],
xAxis: [
{
type: 'category',
@ -2545,7 +2579,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
},
},
axisLabel: {
formatter:'{value}%',
formatter: '{value}%',
show: true,
color: '#fff',
interval: 0.5,
@ -2578,7 +2612,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
normal: {
show: true,
position: "top",
formatter:'{c}%',
formatter: '{c}%',
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
@ -2606,7 +2640,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
formatter:'{c}%',
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@ -2636,7 +2670,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
formatter:'{c}%',
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@ -2666,7 +2700,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
formatter:'{c}%',
formatter: '{c}%',
show: true,
position: "top",
textStyle: {
@ -2696,7 +2730,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: {
//图形上的文本标签
normal: {
formatter:'{c}%',
formatter: '{c}%',
show: true,
position: "top",
textStyle: {

@ -59,14 +59,6 @@
<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 62.8%;font-size: 0.8vw;font-weight: 800;color: red;">生态终端</span>
<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 71.1%;font-size: 0.8vw;font-weight: 800;color: red;">感动用户</span>
<!--亮点产品-->
<!--<div class="HighlightOne" id="HighlightOne"></div>-->
<!--<div class="HighlightTwo" id="HighlightTwo"></div>-->
<!--<div class="HighlightThree" id="HighlightThree"></div>-->
<!--<div class="HighlightFour" id="HighlightFour"></div>-->
<!-- <img class="HighlightOne" id="HighlightOne" width="23vw"/>-->
<!-- <img class="HighlightTwo" id="HighlightTwo" width="23vw"/>-->
<!-- <img class="HighlightThree" id="HighlightThree" width="23vw"/>-->
<!-- <img class="HighlightFour" id="HighlightFour" width="23vw"/>-->
<div id="slide" class="slide"></div>
</body>
<script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script>

Loading…
Cancel
Save