index.vue

<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;">358275</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;">683</span><span style="color: #4CC4E0;">个</span>
                          </div>
                          <div class="numdiv">
                            <p style="color: #4CC4E0;">本年新增</p>
                            <span style="color: #EEC25B;font-size: 30px;">683</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;">35358275</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;">6833</span><span style="color: #4CC4E0;">个</span>
                        </div>
                        <div class="numdiv">
                          <p style="color: #4CC4E0;">本年新增</p>
                          <span style="color: #EEC25B;font-size: 30px;">623483</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;">358275</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;">6843</span><span style="color: #4CC4E0;">个</span>
                        </div>
                        <div class="numdiv">
                          <p style="color: #4CC4E0;">本年新增</p>
                          <span style="color: #EEC25B;font-size: 30px;">6483</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,
                    name: '居民',
                    itemStyle: { color: '#4CC4E0' }
                },
                  { 
                    value: 59,
                      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>