修改界面

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

@ -72,35 +72,6 @@ body {
top: 18.7%; top: 18.7%;
left: 26.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{ .slide{
position: absolute; position: absolute;
width: 22%; width: 22%;

@ -26,7 +26,6 @@ $(() => {
}, document.getElementById("safe"), '') }, document.getElementById("safe"), '')
}) })
autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => { autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
console.log(data)
pieChart(data.map((val,index) => { pieChart(data.map((val,index) => {
if (index == 0 ) { if (index == 0 ) {
return { return {
@ -63,10 +62,6 @@ $(() => {
}) })
autoUpdate(url + "/selectHighlightProducts", 40000, data => { autoUpdate(url + "/selectHighlightProducts", 40000, data => {
let url = data.map(val => val.picturePath) 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]}`) $('#HighlightOne').attr("src" , `http://10.100.70.5:9090/${url[0]}`)
$('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`) $('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`)
$('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`) $('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`)
@ -107,7 +102,7 @@ $(() => {
lineChart({ lineChart({
xName: month.splice(0,value.length), xName: month.splice(0,value.length),
yData: value, yData: value,
yDataName: "能耗百分比" yDataName: "单台能耗(元/台)"
}, document.getElementById("energyConsumption"), '') }, 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); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
@ -325,8 +325,8 @@ const barChartAndLineChart = function (data, id,rotate=0) {
}, },
}, },
axisLabel: { axisLabel: {
rotate:rotate, rotate: rotate,
interval:0, interval: 0,
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
color: "#d1e6eb", color: "#d1e6eb",
@ -667,7 +667,7 @@ const barChartAndLineChartThree = function (data, id) {
}, },
}, },
axisLabel: { axisLabel: {
interval:0, interval: 0,
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
color: "#d1e6eb", 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); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], 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], 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 min = Math.ceil(Math.min(...data.yData))
let max = Math.ceil(Math.max(...data.yData))
let option = { let option = {
grid: { grid: {
top: '34%', top: '20%',
left: '5%', left: '5%',
right: '5%', right: '5%',
bottom: '8%', bottom: '8%',
@ -976,13 +979,13 @@ const lineChart = function (data, id) {
legend: { legend: {
top: '5%', top: '5%',
textStyle: { textStyle: {
fontSize:0.75*vw, fontSize: 0.75 * vw,
color: '#90cb5e', color: '#90cb5e',
}, },
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data:data.xName, data: data.xName,
axisLine: { axisLine: {
show: true, show: true,
}, },
@ -998,8 +1001,8 @@ const lineChart = function (data, id) {
}, },
yAxis: [ yAxis: [
{ {
min:min - 2, min: (min - 2 < 0) ? 0 : min - 2,
max:100, max: (max + 2 > 100) ? 100 : max + 2,
type: 'value', type: 'value',
nameTextStyle: { nameTextStyle: {
color: '#393939', color: '#393939',
@ -1018,6 +1021,7 @@ const lineChart = function (data, id) {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
formatter:`{c}${unit}`,
textStyle: { textStyle: {
color: '#ffffff', color: '#ffffff',
}, },
@ -1043,7 +1047,7 @@ const lineChart = function (data, id) {
label: { label: {
//图形上的文本标签 //图形上的文本标签
normal: { normal: {
formatter:'{c}%', formatter: '{c}%',
show: true, show: true,
position: "top", position: "top",
textStyle: { textStyle: {
@ -1056,6 +1060,37 @@ const lineChart = function (data, id) {
}, },
data: data.yData, 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); let charts = echarts.init(id);
console.log(data)
if (!data) { if (!data) {
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); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
@ -1514,7 +1548,7 @@ const multipleVerticalBarChart = function (data, id) {
charts.setOption(option); charts.setOption(option);
$(window).resize(charts.resize); $(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); let charts = echarts.init(id);
if (!data) { if (!data) {
data = { data = {
@ -1585,7 +1619,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
barWidth:'30%', barWidth: '30%',
itemStyle: { itemStyle: {
//图形样式 //图形样式
normal: { normal: {
@ -1609,8 +1643,8 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
barWidth:'30%', barWidth: '30%',
barGap:'40%', barGap: '40%',
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -1679,13 +1713,13 @@ const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
} }
}, },
legend: { legend: {
data: [data.yDataOneName, data.yDataTwoName,data.yDataThreeName,data.yDataFourName], data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
textStyle: { textStyle: {
fontSize: 0.75 * vw, fontSize: 0.75 * vw,
color: "#F1F1F3", color: "#F1F1F3",
}, },
}, },
dataZoom:[], dataZoom: [],
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
@ -2545,7 +2579,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
}, },
}, },
axisLabel: { axisLabel: {
formatter:'{value}%', formatter: '{value}%',
show: true, show: true,
color: '#fff', color: '#fff',
interval: 0.5, interval: 0.5,
@ -2578,7 +2612,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
normal: { normal: {
show: true, show: true,
position: "top", position: "top",
formatter:'{c}%', formatter: '{c}%',
textStyle: { textStyle: {
color: "#a8aab0", color: "#a8aab0",
fontStyle: "normal", fontStyle: "normal",
@ -2606,7 +2640,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: { label: {
//图形上的文本标签 //图形上的文本标签
normal: { normal: {
formatter:'{c}%', formatter: '{c}%',
show: true, show: true,
position: "top", position: "top",
textStyle: { textStyle: {
@ -2636,7 +2670,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: { label: {
//图形上的文本标签 //图形上的文本标签
normal: { normal: {
formatter:'{c}%', formatter: '{c}%',
show: true, show: true,
position: "top", position: "top",
textStyle: { textStyle: {
@ -2666,7 +2700,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: { label: {
//图形上的文本标签 //图形上的文本标签
normal: { normal: {
formatter:'{c}%', formatter: '{c}%',
show: true, show: true,
position: "top", position: "top",
textStyle: { textStyle: {
@ -2696,7 +2730,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
label: { label: {
//图形上的文本标签 //图形上的文本标签
normal: { normal: {
formatter:'{c}%', formatter: '{c}%',
show: true, show: true,
position: "top", position: "top",
textStyle: { 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: 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> <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> <div id="slide" class="slide"></div>
</body> </body>
<script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script> <script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script>

Loading…
Cancel
Save