<template> <div style="padding: 40px 40px 20px 40px;"> <div class="bottletop"> <div class="bottletopleft"> <div class="bottop"> <div class="botbanner"> <div style="margin-left: 20px;position: absolute;">气瓶统计</div> <img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"> </div> <div class="botnumber"> <div class="botimage"> <img src="../../../assets/mapinages/Group1130.png" alt="" style="width: 100px;height: 100px;margin-top: 30px;"> <div class="ima"> <div style="color: #4CC4E0;font-weight: bolder;">671</div><span style="color: #fff;">总计</span> </div> </div> <div class="botnum"> <div class="numdiv"> <p style="color: #4CC4E0;">本月新增</p> <span style="color: #EEC25B;font-size: 30px;">1203</span><span style="color: #4CC4E0;">个</span> </div> <div class="numdiv"> <p style="color: #4CC4E0;">本年新增</p> <span style="color: #EEC25B;font-size: 30px;">4244</span><span style="color: #4CC4E0;">个</span> </div> </div> </div> </div> <div class="bottop"> <div class="botbanner"> <div style="margin-left: 20px;position: absolute;">气瓶配送统计</div> <img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"> </div> <div class="botnumber"> <div class="botimage"> <img src="../../../assets/mapinages/Group1130.png" alt="" style="width: 100px;height: 100px;margin-top: 30px;"> <div class="ima"> <div style="color: #4CC4E0;font-weight: bolder;">46</div><span style="color: #fff;">总计</span> </div> </div> <div class="botnum"> <div class="numdiv"> <p style="color: #4CC4E0;">本月新增</p> <span style="color: #EEC25B;font-size: 30px;">17</span><span style="color: #4CC4E0;">个</span> </div> <div class="numdiv"> <p style="color: #4CC4E0;">本年新增</p> <span style="color: #EEC25B;font-size: 30px;">29</span><span style="color: #4CC4E0;">个</span> </div> </div> </div> </div> </div> <div class="bottletopcenter"> <div id="map"></div> </div> <div class="bottletopright"> <div class="bottop"> <div class="botbanner"> <div style="margin-left: 20px;position: absolute;">气瓶充装统计</div> <img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"> </div> <div class="botnumber"> <div class="botimage"> <img src="../../../assets/mapinages/Group1130.png" alt="" style="width: 100px;height: 100px;margin-top: 30px;"> <div class="ima"> <div style="color: #4CC4E0;font-weight: bolder;">189</div><span style="color: #fff;">总计</span> </div> </div> <div class="botnum"> <div class="numdiv"> <p style="color: #4CC4E0;">本月新增</p> <span style="color: #EEC25B;font-size: 30px;">293</span><span style="color: #4CC4E0;">个</span> </div> <div class="numdiv"> <p style="color: #4CC4E0;">本年新增</p> <span style="color: #EEC25B;font-size: 30px;">796</span><span style="color: #4CC4E0;">个</span> </div> </div> </div> </div> <div class="bottop"> <div class="botbanner"> <div style="margin-left: 20px;position: absolute;">瓶装燃气用户分析</div> <img src="../../../assets/mapinages/Group1129.png" alt="" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"> </div> <div class="botnumber"> <div id="myChartpieone" :style="{width: '100%', height: '100%'}"></div> </div> </div> </div> </div> <div class="bottlebottom"> <operationNum></operationNum> </div> </div> </template> <script> import * as echarts from 'echarts'; import operationNum from "./components/operationNum"; import { EditorMap } from "@/utils/mapClass/map"; import { mapGetters } from "vuex"; import Null from "@/components/bigWindow/Null.vue"; // import { EditorMap } from "@/utils/mapClass/getPath.js"; export default { components: { operationNum, }, data() { return { //地图 // map: null, arr:[ // {longitude:114.186007 , latitude:38.260288 , iconType:17}, // {longitude:114.185143, latitude:38.260178, iconType:17}, // {longitude:114.186345 , latitude:38.261046 , iconType:17}, // {longitude:114.187007 , latitude:38.262288 , iconType:17}, // {longitude:114.186143, latitude:38.265178, iconType:17}, // {longitude:114.187345 , latitude:38.267046 , iconType:17}, // {longitude:114.188007 , latitude:38.268288 , iconType:17}, // {longitude:114.189143, latitude:38.263178, iconType:17}, // {longitude:114.189345 , latitude:38.269046 , iconType:17}, ] } }, computed: { ...mapGetters([ "systemSetting"]) }, mounted () { this.drawLine(); const path = eval(this.systemSetting.map_center); this.map = new EditorMap( "map", { center: path, zoom: 14.5, }, this ); this.addDevice(); }, methods: { addDevice(data, component) { for(let i =0;i<this.arr.length;i++){ this.map.addDevice(this.arr[i], Null); } }, drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart1 = this.$echarts.init(document.getElementById("myChartpieone")); // 绘制图表 myChart1.setOption({ grid: { bottom: "7%", containLabel: true, }, legend: { orient:"horizontal", icon: "circle", x:'right', y:' center', width:'300', padding:[25, 30,0, 0], itemWidth:10, textStyle:{ color:'#000', }, }, tooltip: { trigger: 'item', }, series: [ { name: '任务概况', type: 'pie', radius: ['50%', '70%'], center: ['50%','60%'], data: [ { value: 40.4, name: '居民', itemStyle: { color: '#4CC4E0' } }, { value: 59.6, name: '非居民' , itemStyle: { color: '#EEC25B' } }, ], labelLine:{ length:20, length2:20, }, label:{ color:'#fff', fontSize: 14, // formatter:"{b}\n\n", // padding:[0,-55], normal: { show: true, position: 'outer', // formatter: '{d}%, {c} \n\n', //模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 formatter: "{a_set|{b}}{b_set|{d}%}", // formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n", borderWidth: 10, borderRadius: 4, rich: { a_set: { color: "auto", // lineHeight: 20, align: "left", // padding: [55, -40, -15, -40], }, b_set:{ color: "auto", }, } } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); } } }; </script> <style lang="scss" scoped> .bottletop{ width: 100%; height: 450px; display: flex; } .bottletopleft{ width: 27.5%; height: 100%; } .bottop{ width: 100%; height: 50%; } .botbanner{ width: 100%; height: 30px; position: relative; font-weight: bolder; } .botnumber{ width: 100%; height: 100%; } .botimage{ float: left; width: 100px; height: 200px; position: relative; margin-left: 20px; } .ima{ width: 100%; position: absolute; text-align: center; top: 0; margin-top: 60px; } .botnum{ float: left; width: 65%; height: 200px; padding: 30px 0 25px 0; } .numdiv{ width: 50%; text-align: center; float: left; } .bottletopcenter{ width: 45%; height: 100%; /* float: left; */ margin-left: 40px; } #map{ width: 100%; height: 100%; } .bottletopright{ width: 27.5%; height: 100%; /* float: left; */ margin-left: 40px; } .bottlebottom{ width: 100%; height: 340px; margin-top: 30px; } </style>