|
|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <div id="bottomLeft">
|
|
|
+ <div class="bg-color-black">
|
|
|
+ <div class="d-flex pt-2 pl-2">
|
|
|
+ <span style="color:#5cd9e8">
|
|
|
+ <icon name="chart-bar"></icon>
|
|
|
+ </span>
|
|
|
+ <div class="d-flex">
|
|
|
+ <span class="fs-xl text mx-2">近30天能源消耗</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!--渐变折线图-->
|
|
|
+ <div id="monthEnergyChart" :style="{height:height,width:width}"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import valveChart from "../dashboard/ValveChart";
|
|
|
+require('echarts/theme/macarons') // echarts theme
|
|
|
+
|
|
|
+import resize from "../dashboard/mixins/resize";
|
|
|
+const animationDuration = 6000
|
|
|
+export default {
|
|
|
+ mixins: [resize],
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '1.7rem'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ /*config: {
|
|
|
+ header: ["", "BCC", "SUB", "EU", "PGU/AEU"],
|
|
|
+ data: [
|
|
|
+ ["SS(HS)自产", "509", "132", "376", "1"],
|
|
|
+ ["HHP", "46", "46", "", ""],
|
|
|
+ ["HS", "-36", "161", "85", "41"],
|
|
|
+ ["MS", "-44", "", "-69", "25"],
|
|
|
+ ["LS", "-16", "", "-11", "-5"],
|
|
|
+ ["TOTAL", "-49", "", "5", ""],
|
|
|
+ ["总消耗", "459", "", "381", "62"]
|
|
|
+ /!*["TOTAL", "-49", "<span class='colorRed'>28</span>"],
|
|
|
+ ["总消耗", "459", "<span class='colorRed'>27</span>"]*!/
|
|
|
+ ],
|
|
|
+ rowNum: 6, //表格行数
|
|
|
+ headerHeight: 35,
|
|
|
+ headerBGC: "#0f1325", //表头
|
|
|
+ oddRowBGC: "#0f1325", //奇数行
|
|
|
+ evenRowBGC: "#171c33", //偶数行
|
|
|
+ columnWidth: [110, 70, 70, 70, 90],
|
|
|
+ align: ["center", "center", "center", "center", "center"]
|
|
|
+ }*/
|
|
|
+
|
|
|
+ chart: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ valveChart
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initChart()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeDestroy() {
|
|
|
+ if (!this.chart) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.chart.dispose()
|
|
|
+ this.chart = null
|
|
|
+ },
|
|
|
+ initChart() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ this.chart = this.echarts.init(document.getElementById('monthEnergyChart'))
|
|
|
+
|
|
|
+ this.chart.setOption({
|
|
|
+ /* 周围边距 */
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '1%',
|
|
|
+ top: '13%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgb(78,109,60)'
|
|
|
+ },
|
|
|
+ symbol: "none",
|
|
|
+ areaStyle: {
|
|
|
+ color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(207,243,68)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(119,189,74)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+#bottomLeft {
|
|
|
+ padding: 0.2rem 0.2rem 0;
|
|
|
+ height: 2.9rem;
|
|
|
+ min-width: 3.75rem;
|
|
|
+ border-radius: 0.0625rem;
|
|
|
+ .bg-color-black {
|
|
|
+ height: 2rem;
|
|
|
+ border-radius: 0.125rem;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #c3cbde;
|
|
|
+ }
|
|
|
+ .chart-box {
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ width: 2.125rem;
|
|
|
+ height: 2.125rem;
|
|
|
+ .active-ring-name {
|
|
|
+ padding-top: 0.125rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shi'sen'yuan