<template>
  <div>
    <dv-full-screen-container>
      <div id="map" style="width: 50%; height: 92%; left: 300px; top: 60px">
        <div class="input-card">
          <h4>地图自适应</h4>
          <input
            id="setFitView"
            type="button"
            class="btn"
            value="地图自适应显示"
          />
        </div>
        <div class="info">
          <div id="centerCoord"></div>
          <div id="tips"></div>
        </div>
      </div>
      <div class="topMB"></div>
      <div class="leftMb"></div>
      <div class="rightMb"></div>
      <div class="bottomMB"></div>
      <div class="dataScorue" style="height: 400px; margin-left: 20px">
        <dl
          style="
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-around;
          "
        >
          <div class="flexbox">
            <dt style="width: 70px; height: 70px">
              <img
                src="@/assets/img/yanghu3.png"
                alt=""
                style="width: 100%; height: 100%"
              />
            </dt>
            <dd style="margin: 0">
              <p>日常养护金额</p>
              <h1>11,457万</h1>
            </dd>
          </div>
          <div class="flexbox">
            <dt style="width: 70px; height: 70px">
              <img
                src="@/assets/img/yanghu1.png"
                alt=""
                style="width: 100%; height: 100%"
              />
            </dt>
            <dd style="margin: 0">
              <p>专项养护金额</p>
              <h1>8,005万</h1>
            </dd>
          </div>
          <div class="flexbox">
            <dt style="width: 70px; height: 70px">
              <img
                src="@/assets/img/yanghu.png"
                alt=""
                style="width: 100%; height: 100%"
              />
            </dt>
            <dd style="margin: 0">
              <p>抢险养护金额</p>
              <h1>1,361万</h1>
            </dd>
          </div>
        </dl>
      </div>
    </dv-full-screen-container>
    <dv-decoration-7 style="width: 100%; height: 35px">
      <div>高速公路智慧养护平台</div>
    </dv-decoration-7>
    <dv-decoration-5 :dur="5" style="width: 100%; height: 40px" />
    <h2 class="money">计费金额统计</h2>
    <h2 class="visoDay">病害处理平均天数(天)</h2>
    <h2 class="CheckStatistics">巡检填报统计(次)</h2>
    <h2 class="amount">各路段养护金额统计(万)</h2>
    <h2 class="expend">各路段合同类支出(万)</h2>
    <h2 class="task">巡检任务完成情况 (次)</h2>
    <h2 class="Inspection">养护任务完成情况统计(次)</h2>
    <h2 class="visoDayroad">病害路段分布</h2>
    <dv-scroll-ranking-board
      :config="config"
      style="width: 390px; height: 280px"
    />
    <div id="main" style="width: 430px; height: 220px"></div>
    <div id="main_1" style="width: 430px; height: 300px"></div>
    <div id="main_3" style="width: 300px; height: 350px"></div>
    <div id="main_4" style="width: 200px; height: 250px"></div>
    <div id="main_5" style="width: 200px; height: 250px"></div>
    <div id="main_6" style="width: 250px; height: 250px"></div>
    <el-button class="open" @click="startAnimation">开始</el-button>
  </div>
</template>

<script>
var marker,
  lineArr = [
    [105.905689, 29.262282],
    [105.905061, 29.262254],
    [105.90371, 29.26268],
    [105.902889, 29.262872],
    [105.901494, 29.26333],
    [105.900759, 29.263569],
    [105.900169, 29.263808],
    [105.899423, 29.264145],
    [105.898914, 29.264421],
    [105.898329, 29.264683],
    [105.896484, 29.265703],
    [105.894011, 29.267081],
    [105.891961, 29.268251],
    [105.889998, 29.269299],
    [105.887466, 29.270534],
    [105.882198, 29.271564],
    [105.878518, 29.272088],
    [105.873422, 29.272949],
    [105.866126, 29.274006],
    [105.861384, 29.274596],
    [105.856022, 29.274381],
    [105.85219, 29.273726],
    [105.850355, 29.273267],
    [105.844948, 29.272219],
    [105.839015, 29.270721],
    [105.835453, 29.269617],
    [105.832502, 29.268382],
    [105.82996, 29.267071],
    [105.828651, 29.26621],
    [105.825292, 29.264142],
    [105.822889, 29.262691],
    [105.816963,29.259618],
    [105.809595,29.257566],
    [105.805144, 29.256841],
    [105.79411,29.255439],
    [105.787549, 29.255269],
    [105.776047,29.255434],
    [105.768409,29.254071],
    [105.762283,29.252658],
    [105.757937, 29.252348],
    [105.756925,29.252226],
    [105.741458, 29.252797],
    [105.727296, 29.251225],
  ]
// import AMap from './Amap.js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      map: '',
      lnglatvalue: [106.545034, 29.549649],
      brige: {
        data: [
          {
            name: '主线桥',
            value: 55,
          },
          {
            name: '大型桥',
            value: 120,
          },
          {
            name: '上跨车行天桥',
            value: 78,
          },
          {
            name: '上跨人行天桥',
            value: 66,
          },
          {
            name: '渡槽',
            value: 80,
          },
          {
            name: '匝道桥',
            value: 45,
          },
          {
            name: '立交桥',
            value: 29,
          },
        ],
      },
      slove: {
        data: [
          {
            name: '主线桥',
            value: 55,
          },
          {
            name: '大型桥',
            value: 120,
          },
          {
            name: '上跨车行天桥',
            value: 78,
          },
          {
            name: '上跨人行天桥',
            value: 66,
          },
          {
            name: '渡槽',
            value: 80,
          },
          {
            name: '匝道桥',
            value: 45,
          },
          {
            name: '立交桥',
            value: 29,
          },
        ],
      },
      slope: {
        data: [
          {
            name: '盖板涵',
            value: 33,
          },
          {
            name: '管涵',
            value: 50,
          },
          {
            name: '箱涵',
            value: 47,
          },
          {
            name: '拱涵',
            value: 99,
          },
          {
            name: '倒虹吸',
            value: 59,
          },
        ],
      },
      config: {
        data: [
          {
            name: '重庆通力养护',
            value: 55,
          },
          {
            name: '重庆市分公司',
            value: 120,
          },
          {
            name: '渝东片区',
            value: 78,
          },
          {
            name: '养护管理部',
            value: 66,
          },
          {
            name: '营运机电部',
            value: 80,
          },
          {
            name: '渝中片区',
            value: 45,
          },
          {
            name: '遂渝分公司',
            value: 29,
          },
        ],
        unit: '天',
      },
      configs: {
        header: ['永沪高速', '双合高速', '遂渝高速'],
        data: [
          ['<span style="color:#37a2da;">晴转多云</span>', '☀ ☁ ', '32℃~25℃'],
          ['<span style="color:#32c5e9;">多云转阴</span>', '☁ ☂ ', '25℃~20℃'],
          ['<span style="color:#67e0e3;">雨转小雪</span>', '☂❄ ', '20℃~5℃'],
          ['<span style="color:#9fe6b8;">晴转多云</span>', '☀ ☁ ', '32℃~25℃'],
          ['<span style="color:#ffdb5c;">多云转阴</span>', '☁ ☂ ', '25℃~20℃'],
          ['<span style="color:#ff9f7f;">雨转小雪</span>', '☂❄ ', '20℃~5℃'],
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
      },
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      this.initMap()
      this.initEcharts()
      this.startAnimation()
    }, 2000)
  },
  methods: {
    startAnimation() {
      this.stopAnimation()
      marker.moveAlong(lineArr, 5000)
    },
    stopAnimation() {
      marker.stopMove()
    },
    initMap() {
      var map = new AMap.Map('map', {
        zoom: 11.2,
        center: [105.905689, 29.262282],
        showLabel: false,
        viewMode: '2D',
        mapStyle: 'amap://styles/blue',
        pitch: 50,
      })
      marker = new AMap.Marker({
        map: map,
        position: [105.905689, 29.262282],
        icon: require('../../assets/img/mark_bs.png'),
        offset: new AMap.Pixel(-13, -26),
      })
      //为走过
      let polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      })
      //走过
      let passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: '#AF5', //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      })

      marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath)
      })
      this.markers = marker
      map.setFitView()

      // window.startAnimation = function startAnimation() {
      //   marker.moveAlong(lineArr, {
      //     // 每一段的时长
      //     duration: 500, //可根据实际采集时间间隔设置
      //     // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
      //     autoRotation: true,
      //   })
      // }
      this.timer = setInterval(() => {
        setTimeout(() => {
          this.startAnimation()
        }, 0)
      }, 13500)
      var markers = [
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.905689, 29.262282],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.902889, 29.262872],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.900759, 29.263569],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.899423, 29.264145],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.897685, 29.26501],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.896484, 29.265703],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.894011, 29.267081],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.889998, 29.269299],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.882198, 29.271564],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.878518, 29.272088],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.873422, 29.272949],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.866126, 29.274006],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.861384, 29.274596],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.856022, 29.274381],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.850355, 29.273267],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.839015, 29.270721],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.835453, 29.269617],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.832502, 29.268382],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.82996, 29.267071],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.809595,29.257566],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.805144, 29.256841],
        },{
          icon: require('../../assets/img/大桥.png'),
          position: [105.816934,29.259652],
        },{
          icon: require('../../assets/img/大桥.png'),
          position: [105.797781,29.256147],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.828651, 29.26621],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.825292, 29.264142],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.822889, 29.262691],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.805144, 29.256841],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.787549, 29.255269],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.768409, 29.254071],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.757937, 29.252348],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.741458, 29.252797],
        },
        {
          icon: require('../../assets/img/大桥.png'),
          position: [105.727296, 29.251225],
        },
        {
          icon: require('../../assets/img/涵洞.png'),

          position: [105.905061, 29.262254],
        },
        {
          icon: require('../../assets/img/边坡.png'),

          position: [105.788603,29.255398],
        },
        {
          icon: require('../../assets/img/边坡.png'),

          position: [105.812023,29.258268],
        },
        {
          icon: require('../../assets/img/边坡.png'),

          position: [105.826508,29.264953],
        },
        {
          icon: require('../../assets/img/边坡.png'),

          position: [105.843062,29.271851],
        },
        {
          icon: require('../../assets/img/边坡.png'),

          position: [105.751479,29.252259],
        },
        {
          icon: require('../../assets/img/边坡.png'),

          position: [105.867993,29.273664],
        },
        {
          icon: require('../../assets/img/隧道.png'),

          position: [105.891961, 29.268251],
        },
        {
          icon: require('../../assets/img/隧道.png'),

          position: [105.898914, 29.264421],
        },
        {
          icon: require('../../assets/img/隧道.png'),
          position: [105.887466, 29.270534],
        },
        {
          icon: require('../../assets/img/隧道.png'),
          position: [105.897936,29.264785],
        },
         {
          icon: require('../../assets/img/隧道.png'),
          position: [105.895033,29.266366],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.8876,29.269971],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.889726,29.269003],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.881202,29.271745],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.876136,29.272519],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.869351,29.273454],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.898488,29.264568],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.899907,29.263826],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.900351,29.263741],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.901447,29.263241],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.902273,29.262965],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.903987,29.262594],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.861288,29.2747],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.855132,29.2744],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.848601,29.27301],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.846816,29.272635],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.839854,29.271005],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.834515,29.26916],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.830014,29.267116],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.825435,29.26425],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.818884,29.260362],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.810238,29.257818],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.801261,29.256539],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.804811,29.256926],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.794845,29.255765],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.790537,29.255426],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.786913,29.255281],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.783474,29.255426],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.780489,29.255514],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.778855,29.255592],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.777401,29.255474],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.773145,29.254912],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.75366,29.252228],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.744209,29.252955],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.73248,29.252009],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.726282,29.25087],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.751074,29.252345],
        },{
          icon: require('../../assets/img/隧道.png'),
          position: [105.76088,29.252525],
        },
      ]

      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
      markers.forEach(function (marker) {
        new AMap.Marker({
          map: map,
          icon: marker.icon,
          position: [marker.position[0], marker.position[1]],
          offset: new AMap.Pixel(-13, -30),
        })
      })
      // AMap.service(['AMap.RoadInfoSearch'], function () {
      //   var roadSearch = new AMap.RoadInfoSearch({
      //     //构造地点查询类
      //     pageSize: 5,
      //     pageIndex: 1,
      //     city: '020',
      //   })
      //   //关键字查询
      //   roadSearch.roadInfoSearchByRoadName(
      //     '永沪高速',
      //     function (status, result) {
      //       // alert(result.roadInfo[0].path[0])
      //       console.log(result,'result')
      //     }
      //   )
      // })
      // var loca = new Loca.Container({
      //   map,
      // })
      // window._loca = loca

      // var geo = new Loca.GeoJSONSource({
      //   url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
      // })

      // var layer = new Loca.PulseLineLayer({
      //   // loca,
      //   zIndex: 10,
      //   opacity: 1,
      //   visible: true,
      //   zooms: [2, 22],
      // })

      // var headColors = [
      //   '#EFBB51',
      //   '#7F3CFF',
      //   '#4CC19B',
      //   '#0B5D74',
      //   '#E06AC4',
      //   '#223F9B',
      //   '#F15C1A',
      //   '#7A0FA6',
      // ]
      // console.log('geo', geo)
      // layer.setSource(geo)
      // layer.setStyle({
      //   altitude: 0,
      //   lineWidth: 2,
      //   // 脉冲头颜色
      //   headColor: (_, feature) => {
      //     return headColors[feature.properties.type - 1]
      //   },
      //   // 脉冲尾颜色
      //   trailColor: 'rgba(128, 128, 128, 0.5)',
      //   // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
      //   interval: 0.25,
      //   // 脉冲线的速度，几秒钟跑完整段路
      //   duration: 5000,
      // })
      // loca.add(layer)
      // loca.animate.start()

      // loca.animate.start()
      // var dat = new Loca.Dat()
      // dat.addLayer(layer, '公交')
      // AMap.plugin('AMap.MoveAnimation', function () {
      //   var marker,
      //     lineArr = [
      //       [105.905689, 29.262282],
      //       [105.905061, 29.262254],
      //       [105.90371, 29.26268],
      //       [105.902889, 29.262872],
      //       [105.901494, 29.26333],
      //       [105.900759, 29.263569],
      //       [105.900169, 29.263808],
      //       [105.899423, 29.264145],
      //       [105.898914, 29.264421],
      //       [105.898329, 29.264683],
      //       [105.897685, 29.26501],
      //       [105.896484, 29.265703],
      //       [105.894011, 29.267081],
      //       [105.891961, 29.268251],
      //       [105.889998, 29.269299],
      //       [105.887466, 29.270534],
      //       [105.882198, 29.271564],
      //       [105.878518, 29.272088],
      //       [105.873422, 29.272949],
      //       [105.866126, 29.274006],
      //       [105.861384, 29.274596],
      //       [105.85602, 29.274381],
      //       [105.85219, 29.273726],
      //       [105.850355, 29.273267],
      //       [105.844948, 29.272219],
      //       [105.839015, 29.270721],
      //       [105.835453, 29.269617],
      //       [105.832502, 29.268382],
      //       [105.82996, 29.267071],
      //       [105.828651, 29.26621],
      //       [105.825292, 29.264142],
      //       [105.822889, 29.262691],
      //       [105.805144, 29.256841],
      //       [105.787549, 29.255269],
      //       [105.768409, 29.254071],
      //       [105.757937, 29.252348],
      //       [105.741458, 29.252797],
      //       [105.727296, 29.251225],
      //     ]

      //   var map = new AMap.Map('map', {
      //     resizeEnable: true,
      //     center: [105.905689, 29.262282],
      //     zoom: 17,
      //     mapStyle: 'amap://styles/blue',
      //   })

      //   marker = new AMap.Marker({
      //     map: map,
      //     position: [105.905689, 29.262282],
      //   })

      //   // 绘制轨迹
      //   var polyline = new AMap.Polyline({
      //     map: map,
      //     path: lineArr,
      //     showDir: true,
      //     strokeColor: '#28F', //线颜色
      //     // strokeOpacity: 1,     //线透明度
      //     strokeWeight: 6, //线宽
      //     // strokeStyle: "solid"  //线样式
      //   })

      //   var passedPolyline = new AMap.Polyline({
      //     map: map,
      //     strokeColor: '#AF5', //线颜色
      //     strokeWeight: 6, //线宽
      //   })

      //   marker.on('moving', function (e) {
      //     passedPolyline.setPath(e.passedPath)
      //     map.setCenter(e.target.getPosition(), true)
      //   })

      //   window.startAnimation = function startAnimation() {
      //     marker.moveAlong(lineArr, {
      //       // 每一段的时长
      //       duration: 500, //可根据实际采集时间间隔设置
      //       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
      //       autoRotation: true,
      //     })
      //   }
      //   map.setFitView()
      // })
    },
    initEcharts() {
      let chartDom = document.getElementById('main')
      let myChart = echarts.init(chartDom)
      let option
      let chartDom_1 = document.getElementById('main_1')
      let myChart_1 = echarts.init(chartDom_1)
      let option_1
      let chartDom_3 = document.getElementById('main_3')
      let myChart_3 = echarts.init(chartDom_3)
      let option_3
      let chartDom_4 = document.getElementById('main_4')
      let myChart_4 = echarts.init(chartDom_4)
      let option_4
      let chartDom_5 = document.getElementById('main_5')
      let myChart_5 = echarts.init(chartDom_5)
      let option_5
      let chartDom_6 = document.getElementById('main_6')
      let myChart_6 = echarts.init(chartDom_6)
      let option_6
      option = {
        // title: {
        //   text: 'Stacked Area Chart',
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['石黔高速', '秀松高速', '潼荣高速', '合安高速', '永泸高速'],
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '0',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '石黔高速',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '秀松高速',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '潼荣高速',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: '合安高速',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: '永泸高速',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top',
            },
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      }
      option_1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: [
            '石黔高速',
            '秀松高速',
            '潼荣高速',
            '合安高速',
            '永泸高速',
            '成渝环线高速',
            '合璧津高速',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
        grid: {
          left: '12%',
          right: '3%',
        },
        color: '#91cc75',
        /*设置文字样式*/
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            let ret = '' //拼接加\n返回的类目项
            let maxLength = 3 //每项显示文字个数
            let valLength = value.length //X轴类目项的文字个数
            let rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于3,
              for (let i = 0; i < rowN; i++) {
                let temp = '' //每次截取的字符串
                let start = i * maxLength //开始截取的位置
                let end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
              }
              return ret
            } else {
              return value
            }
          },
        },
      }
      option_3 = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'horizontal',
          left: 'left',
          textStyle: {
            //图例文字的样式
            color: '#',
          },
          bottom: '0',
          top: '0',
        },
        series: [
          {
            name: '各路段合同类支出',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            label: {
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 400,
                  fontSize: 14, //文字的字体大小
                  color: '#000',
                },
                formatter: '{c}万',
              },
            },
            data: [
              {value: 1048, name: '石黔高速'},
              {value: 735, name: '秀松高速'},
              {value: 580, name: '潼荣高速'},
              {value: 484, name: '合安高速'},
              {value: 300, name: '永泸高速'},
              {value: 232, name: '成渝环线'},
              {value: 500, name: '合璧津高速'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      option_4 = {
        tooltip: {
          trigger: 'item',
        },

        legend: {
          top: '3%',
          left: 'center',
          textStyle: {
            //图例文字的样式
            color: '#',
            fontSize: '10',
          },
        },
        series: [
          {
            name: '巡检任务完成情况统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            center: ['50%', '70%'],
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 9, //文字的字体大小
                  color: '#000',
                },
                formatter: '{c}次',
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
                color: '#fff',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {value: 1048, name: '石黔高速'},
              {value: 735, name: '秀松高速'},
              {value: 580, name: '潼荣高速'},
              {value: 484, name: '合安高速'},
              {value: 300, name: '永泸高速'},
              {value: 328, name: '成渝环线'},
              {value: 590, name: '合璧津高速'},
            ],
          },
        ],
      }
      option_5 = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '3%',
          left: 'center',
          textStyle: {
            //图例文字的样式
            color: '#',
          },
          textStyle: {
            //图例文字的样式
            color: '#',
            fontSize: '10',
          },
        },
        series: [
          {
            name: '养护任务完成情况统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            center: ['50%', '70%'],
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 9, //文字的字体大小
                  color: '#000',
                },
                formatter: '{c}次',
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold',
                color: '#fff',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {value: 189, name: '石黔高速'},
              {value: 313, name: '秀松高速'},
              {value: 829, name: '潼荣高速'},
              {value: 317, name: '合安高速'},
              {value: 489, name: '永泸高速'},
              {value: 129, name: '成渝环线'},
              {value: 941, name: '合璧津高速'},
            ],
          },
        ],
      }
      option_6 = {
        polar: {
          radius: [20, '90%'],
        },
        angleAxis: {
          data: [
            '石黔高速',
            '秀松高速',
            '潼荣高速',
            '合安高速',
            '永泸高速',
            '成渝环线高速',
            '合璧津高速',
          ],
          type: 'category',
          startAngle: 0,
          zlevel: 100000,
          axisLine: {},
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: -45,
            formatter: function (value, index) {
              return '{a|' + value + '}'
            },
            rich: {
              a: {
                color: '#fff',
                fontWeight: 'bold',
                backgroundColor: 'rgba(0,0,0,0)',
                // padding: 0,
              },
              b: {
                color: '#fff',
                fontWeight: 'bold',
                backgroundColor: 'rgba(0,0,0,0)',
              },
            },
          },
        },
        radiusAxis: {
          //极坐标系的径向轴。
          // min: 0,
          // axisLine: {
          //   //坐标轴轴线设置
          //   show: false, // lineStyle: { // color: "#ccc" // }
          // },
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [58, 81, 64, 42, 51, 72, 39],
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}',
            fontSize: 10,
          },
        },
        animation: false,
      }
      option && myChart.setOption(option)
      option_1 && myChart_1.setOption(option_1)
      option_3 && myChart_3.setOption(option_3)
      option_4 && myChart_4.setOption(option_4)
      option_5 && myChart_5.setOption(option_5)
      option_6 && myChart_6.setOption(option_6)
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
}
</script>

<style lang="scss" scoped>
/deep/body {
  position: relative;
}
#dv-full-screen-container {
  width: 100% !important;
  height: 100% !important;
  background: url(../../assets/img/index_bg.png) left top no-repeat;
}
.topMB {
  height: 100px;
  width: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  filter: blur(10px);
}
.topTitle {
  position: absolute;
  color: yellow;
  font-size: 35px;
  z-index: 100;
  top: 0;
  left: 0;
  text-indent: 20px;
}
.leftMb {
  position: absolute;
  height: calc(100% - 100px);
  width: 320px;
  background: rgba($color: #000000, $alpha: 0.7);
  left: 0;
  bottom: 0;
  filter: blur(10px);
}
.rightMb {
  position: absolute;
  height: calc(100% - 100px);
  width: 700px;
  background: rgba($color: #000000, $alpha: 0.7);
  right: 0;
  bottom: 0;
  filter: blur(10px);
}
.bottomMB {
  height: 100px;
  width: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
  filter: blur(10px);
}
.dv-border-box-11 {
  position: absolute;
  top: 0;
  left: 0;
}
.dataScorue {
  position: absolute;
  left: 0;
  top: 70px;
  dl {
    dt {
      margin-bottom: 10px;
    }
    dd {
      line-height: 45px;
      margin-left: 20px !important;
      p {
        font-size: 18px;
        color: #fff;
        margin: 0;
      }
      h1 {
        font-size: 25px;
        margin: 0;
        color: yellow;
      }
    }
  }
}
.flexbox {
  display: flex;
  align-items: center;
}
.dv-decoration-5 {
  position: absolute;
  top: 20px;
  z-index: 999;
}
.dv-decoration-7 {
  position: absolute;
  top: 3px;
  z-index: 999;

  div {
    color: #fff;
    font-size: 35px;
    margin: 0 10px;
  }
}
.dv-decoration-9 {
  position: absolute;
  bottom: 100px;
  left: 25px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
.dv-decoration-12 {
  position: absolute;
  top: 20px;
  right: 65px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}

.visoDay {
  position: absolute;
  bottom: 300px;
  right: 140px;
  z-index: 999;
  color: #000;
  background: yellow;
  font-size: 18px;
  width: 260px;
}
.CheckStatistics {
  position: absolute;
  top: 40px;
  right: 140px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.amount {
  position: absolute;
  top: 310px;
  right: 140px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.expend {
  position: absolute;
  top: 465px;
  left: 20px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.open {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.money {
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.task {
  position: absolute;
  top: 40px;
  right: 420px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.Inspection {
  position: absolute;
  top: 310px;
  right: 420px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.visoDayroad {
  position: absolute;
  bottom: 300px;
  right: 420px;
  z-index: 999;
  color: #000;
  font-size: 18px;
  width: 260px;
  background: yellow;
}
.dv-scroll-ranking-board {
  position: absolute;
  bottom: 30px;
  right: 10px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
/deep/#main {
  position: absolute !important;
  top: 100px;
  right: 0px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
/deep/#main_1 {
  position: absolute !important;
  top: 310px;
  right: 0px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
/deep/#main_3 {
  position: absolute !important;
  top: 530px;
  left: 20px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
/deep/#main_4 {
  position: absolute !important;
  top: 74px;
  right: 460px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
/deep/#main_5 {
  position: absolute !important;
  top: 345px;
  right: 460px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
/deep/#main_6 {
  position: absolute !important;
  top: 640px;
  right: 430px;
  z-index: 999;
  color: #fff;
  font-size: 20px;
}
// .amap-icon img{
//           width: 25px;
//           height: 34px;
//       }
// /deep/.amap-icon img {
//   width: 50px !important;
//   height: 50px !important;
// }
</style>