|
|
|
|
@ -42,7 +42,7 @@ |
|
|
|
|
<div class="bottom1-1"> |
|
|
|
|
日用电量 |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<div id="myEcharts" style="width: 100%; height: 86.7%"> |
|
|
|
|
pic |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -74,8 +74,47 @@ |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup name="Index"> |
|
|
|
|
|
|
|
|
|
<script name="Index"> |
|
|
|
|
import { onMounted } from "vue"; |
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
export default { |
|
|
|
|
name: "drgl", |
|
|
|
|
setup() { |
|
|
|
|
onMounted(() => {//需要获取到element,所以是onMounted的Hook |
|
|
|
|
let myChart = echarts.init(document.getElementById("myEcharts")); |
|
|
|
|
// 绘制图表 |
|
|
|
|
myChart.setOption({ |
|
|
|
|
title: {}, |
|
|
|
|
tooltip: {}, |
|
|
|
|
xAxis: { |
|
|
|
|
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: 'white' |
|
|
|
|
}, |
|
|
|
|
show: true, |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
show: true, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: "用户量", |
|
|
|
|
type: "bar", |
|
|
|
|
data: [5, 20, 36, 10, 10, 20], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
window.onresize = function () {//自适应大小 |
|
|
|
|
myChart.resize(); |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
components: {}, |
|
|
|
|
mounted() {}, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
@ -87,7 +126,7 @@ |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
.card{ |
|
|
|
|
width: 24%; |
|
|
|
|
@ -100,7 +139,7 @@ |
|
|
|
|
|
|
|
|
|
.bottom{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 615px; |
|
|
|
|
height: 640px; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
@ -109,14 +148,14 @@ |
|
|
|
|
width: 49.35%; |
|
|
|
|
height: 300px; |
|
|
|
|
background-color: #2F3D8A; |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
p{ |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
.bottom1-1{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 40px; |
|
|
|
|
height: 13.3%; |
|
|
|
|
background-color: #374590; |
|
|
|
|
padding-top: 10px; |
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
