<template>
  <div style="height: 100%; position: relative">
    <!-- 中国地图 -->
    <div class="top-btns">
      <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
      <div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
      <div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
    </div>
    <div class="echarts" id="mapChart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
let mapJson = require('./china.json')
// let mapBg = require('./assets/home/map-bg.jpg')
let mapImg = require('./assets/home/china.png')
let twoIcon = require('./assets/home/yd-icon.png')
import labelBg from '../../img/value-bg.png'
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'

console.log(twoIcon)
import 'echarts-gl'
export default {
  props: {
    isZoom: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      btnIndex: 1,
      cityData: [
        {
          cityName: '北京市',
          deptName: '北京',
          value: [116.407396, 39.9042, 3500],
          totalValue: 3500,
          totalEquipmentQuantity: 520,
          configRate: 92,
          lineNum: 80,
          substationNum: 40,
          cableNum: 30,
        },
        {
          cityName: '天津市',
          deptName: '天津',
          value: [117.190182, 39.125596, 2600],
          totalValue: 2600,
          totalEquipmentQuantity: 480,
          configRate: 90,
          lineNum: 70,
          substationNum: 32,
          cableNum: 28,
        },
        {
          cityName: '上海市',
          deptName: '上海',
          value: [121.472644, 31.231706, 4200],
          totalValue: 4200,
          totalEquipmentQuantity: 600,
          configRate: 95,
          lineNum: 88,
          substationNum: 46,
          cableNum: 35,
        },
        {
          cityName: '重庆市',
          deptName: '重庆',
          value: [106.551556, 29.563009, 3000],
          totalValue: 3000,
          totalEquipmentQuantity: 510,
          configRate: 91,
          lineNum: 75,
          substationNum: 38,
          cableNum: 33,
        },

        {
          cityName: '石家庄市',
          deptName: '石家庄',
          value: [114.514859, 38.042307, 2300],
          totalValue: 2300,
          totalEquipmentQuantity: 450,
          configRate: 89,
          lineNum: 68,
          substationNum: 31,
          cableNum: 26,
        },
        {
          cityName: '太原市',
          deptName: '太原',
          value: [112.548879, 37.87059, 2100],
          totalValue: 2100,
          totalEquipmentQuantity: 430,
          configRate: 88,
          lineNum: 60,
          substationNum: 29,
          cableNum: 22,
        },
        {
          cityName: '沈阳市',
          deptName: '沈阳',
          value: [123.431474, 41.805698, 2400],
          totalValue: 2400,
          totalEquipmentQuantity: 455,
          configRate: 89,
          lineNum: 66,
          substationNum: 33,
          cableNum: 25,
        },
        {
          cityName: '长春市',
          deptName: '长春',
          value: [125.323544, 43.817072, 2050],
          totalValue: 2050,
          totalEquipmentQuantity: 410,
          configRate: 87,
          lineNum: 58,
          substationNum: 28,
          cableNum: 23,
        },
        {
          cityName: '哈尔滨市',
          deptName: '哈尔滨',
          value: [126.534967, 45.803775, 2600],
          totalValue: 2600,
          totalEquipmentQuantity: 470,
          configRate: 90,
          lineNum: 72,
          substationNum: 34,
          cableNum: 27,
        },

        {
          cityName: '南京市',
          deptName: '南京',
          value: [118.796877, 32.060255, 3800],
          totalValue: 3800,
          totalEquipmentQuantity: 580,
          configRate: 94,
          lineNum: 85,
          substationNum: 42,
          cableNum: 34,
        },
        {
          cityName: '杭州市',
          deptName: '杭州',
          value: [120.15507, 30.274084, 3600],
          totalValue: 3600,
          totalEquipmentQuantity: 540,
          configRate: 93,
          lineNum: 82,
          substationNum: 41,
          cableNum: 32,
        },
        {
          cityName: '合肥市',
          deptName: '合肥',
          value: [117.227239, 31.820586, 2800],
          totalValue: 2800,
          totalEquipmentQuantity: 520,
          configRate: 92,
          lineNum: 80,
          substationNum: 40,
          cableNum: 30,
        },
        {
          cityName: '福州市',
          deptName: '福州',
          value: [119.296494, 26.074508, 2500],
          totalValue: 2500,
          totalEquipmentQuantity: 485,
          configRate: 90,
          lineNum: 74,
          substationNum: 34,
          cableNum: 28,
        },
        {
          cityName: '南昌市',
          deptName: '南昌',
          value: [115.892151, 28.676493, 2400],
          totalValue: 2400,
          totalEquipmentQuantity: 465,
          configRate: 89,
          lineNum: 70,
          substationNum: 33,
          cableNum: 27,
        },
        {
          cityName: '济南市',
          deptName: '济南',
          value: [117.000923, 36.675807, 3100],
          totalValue: 3100,
          totalEquipmentQuantity: 550,
          configRate: 93,
          lineNum: 84,
          substationNum: 39,
          cableNum: 31,
        },

        {
          cityName: '郑州市',
          deptName: '郑州',
          value: [113.625368, 34.746599, 3300],
          totalValue: 3300,
          totalEquipmentQuantity: 560,
          configRate: 94,
          lineNum: 86,
          substationNum: 40,
          cableNum: 32,
        },
        {
          cityName: '武汉市',
          deptName: '武汉',
          value: [114.305393, 30.593099, 3400],
          totalValue: 3400,
          totalEquipmentQuantity: 570,
          configRate: 94,
          lineNum: 87,
          substationNum: 41,
          cableNum: 33,
        },
        {
          cityName: '长沙市',
          deptName: '长沙',
          value: [112.938814, 28.228209, 2900],
          totalValue: 2900,
          totalEquipmentQuantity: 530,
          configRate: 92,
          lineNum: 78,
          substationNum: 38,
          cableNum: 29,
        },

        {
          cityName: '广州市',
          deptName: '广州',
          value: [113.264435, 23.129163, 4200],
          totalValue: 4200,
          totalEquipmentQuantity: 600,
          configRate: 95,
          lineNum: 90,
          substationNum: 48,
          cableNum: 36,
        },
        {
          cityName: '海口市',
          deptName: '海口',
          value: [110.33119, 20.031971, 2000],
          totalValue: 2000,
          totalEquipmentQuantity: 400,
          configRate: 86,
          lineNum: 55,
          substationNum: 26,
          cableNum: 20,
        },

        {
          cityName: '成都市',
          deptName: '成都',
          value: [104.065735, 30.659462, 3900],
          totalValue: 3900,
          totalEquipmentQuantity: 580,
          configRate: 94,
          lineNum: 83,
          substationNum: 42,
          cableNum: 34,
        },
        {
          cityName: '贵阳市',
          deptName: '贵阳',
          value: [106.630153, 26.647661, 2100],
          totalValue: 2100,
          totalEquipmentQuantity: 440,
          configRate: 88,
          lineNum: 62,
          substationNum: 30,
          cableNum: 24,
        },
        {
          cityName: '昆明市',
          deptName: '昆明',
          value: [102.833722, 24.88149, 2200],
          totalValue: 2200,
          totalEquipmentQuantity: 450,
          configRate: 88,
          lineNum: 63,
          substationNum: 31,
          cableNum: 24,
        },
        {
          cityName: '西安市',
          deptName: '西安',
          value: [108.93977, 34.341574, 3000],
          totalValue: 3000,
          totalEquipmentQuantity: 525,
          configRate: 92,
          lineNum: 76,
          substationNum: 37,
          cableNum: 29,
        },

        {
          cityName: '兰州市',
          deptName: '兰州',
          value: [103.834304, 36.061089, 1800],
          totalValue: 1800,
          totalEquipmentQuantity: 390,
          configRate: 85,
          lineNum: 54,
          substationNum: 25,
          cableNum: 19,
        },
        {
          cityName: '西宁市',
          deptName: '西宁',
          value: [101.777795, 36.617134, 1500],
          totalValue: 1500,
          totalEquipmentQuantity: 350,
          configRate: 84,
          lineNum: 50,
          substationNum: 23,
          cableNum: 18,
        },
        {
          cityName: '台北市',
          deptName: '台北',
          value: [121.565418, 25.033964, 3000],
          totalValue: 3000,
          totalEquipmentQuantity: 520,
          configRate: 92,
          lineNum: 78,
          substationNum: 39,
          cableNum: 29,
        },

        {
          cityName: '呼和浩特市',
          deptName: '呼和浩特',
          value: [111.75199, 40.84149, 1600],
          totalValue: 1600,
          totalEquipmentQuantity: 360,
          configRate: 84,
          lineNum: 52,
          substationNum: 24,
          cableNum: 19,
        },
        {
          cityName: '南宁市',
          deptName: '南宁',
          value: [108.366543, 22.817002, 2100],
          totalValue: 2100,
          totalEquipmentQuantity: 440,
          configRate: 88,
          lineNum: 62,
          substationNum: 29,
          cableNum: 24,
        },
        {
          cityName: '拉萨市',
          deptName: '拉萨',
          value: [91.171924, 29.652491, 1200],
          totalValue: 1200,
          totalEquipmentQuantity: 300,
          configRate: 82,
          lineNum: 40,
          substationNum: 18,
          cableNum: 12,
        },
        {
          cityName: '银川市',
          deptName: '银川',
          value: [106.278179, 38.46637, 1500],
          totalValue: 1500,
          totalEquipmentQuantity: 340,
          configRate: 83,
          lineNum: 48,
          substationNum: 22,
          cableNum: 17,
        },
        {
          cityName: '乌鲁木齐市',
          deptName: '乌鲁木齐',
          value: [87.616848, 43.825592, 1900],
          totalValue: 1900,
          totalEquipmentQuantity: 380,
          configRate: 85,
          lineNum: 55,
          substationNum: 27,
          cableNum: 20,
        },

        {
          cityName: '香港',
          deptName: '香港',
          value: [114.173355, 22.320048, 2500],
          totalValue: 2500,
          totalEquipmentQuantity: 420,
          configRate: 88,
          lineNum: 65,
          substationNum: 30,
          cableNum: 24,
        },
        {
          cityName: '澳门',
          deptName: '澳门',
          value: [113.54909, 22.198951, 1600],
          totalValue: 1600,
          totalEquipmentQuantity: 330,
          configRate: 83,
          lineNum: 48,
          substationNum: 22,
          cableNum: 18,
        },
      ],
    }
  },
  mounted() {
    this.initChart()
    // this.getInfo()
  },

  methods: {
    handleBtn(index) {
      this.btnIndex = index
      console.log('🚀 ~ this.btnIndex:', this.btnIndex)
      // this.cityData = []
      // this.getInfo()
    },
    async getInfo() {
      try {
        let res = null
        if (this.btnIndex == 1) {
          res = await getUnitEquipmentConfigurationApi()
          if (!res.data) return
          res.data = res.data.filter(item => item.location)
          this.cityData = res.data.map((item) => {
            let value = item.location.split(',')
            value.push(item.totalValue)
            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
              ...item,
              value,
            }
          })
        } else if (this.btnIndex == 2) {
          res = await getEquipmentNumberApi()
          if (!res.data) return
          res.data = res.data.filter(item => item.location)
          this.cityData = res.data.map((item) => {
            let value = item.location.split(',')
            value.push(item.num)
            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
              ...item,
              value,
              deptName: item.name,
            }
          })
        } else if (this.btnIndex == 3) {
          res = await getMechanizationRateApi()
        }
        this.$nextTick(() => {
          console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
          this.initChart()
        })
        console.log('🚀 ~ 地图数据 ~ res:', res)
      } catch (error) {
        console.log('🚀 ~ 地图数据 ~ error:', error)
        // this.initChart()
      }
    },
    initChart(jsonData = mapJson) {
      console.log('🚀 ~ 地图初始化 ~ arr:')
      // 模拟数据
      let arr = this.cityData.map((item) => {
        return {
          ...item,
          name: item.cityName,
        }
      })

      echarts.registerMap('china', jsonData)
      const charEle = document.getElementById('mapChart')
      const myChart = echarts.init(charEle)
      // let tooltip = gzjhTooltip(arr)
      const option = {
        tooltip: {
          show: true,
          backgroundColor: 'transparent',
          borderWidth: 0,
          formatter: function (e) {
            let n = e.name
            let res = ''
            arr.forEach((data) => {
              // console.log('🚀 ~ 提示数据 ~ data:', data)
              if (data.cityName === n) {
                res =
                  "<div style='width: 330px;height: 285px; background: url(" +
                  require('../../img/dialog.png') +
                  ") no-repeat;background-size:100% 100%;'>" +
                  "<div style='width: 300px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
                  n +
                  '</div>' +
                  "<div style='margin-top:10px;margin-bottom:5px;width: 300px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>装备价值：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
                  data.totalValue +
                  " <span style='color:#FFF;font-size:14px'> 万元</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>装备数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.totalEquipmentQuantity +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>配置率：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.configRate +
                  "<span style='color:#FFF;font-size:14px'> %</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>线路数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.lineNum +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>变电数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.substationNum +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>电缆数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.cableNum +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  '</div>'
              }
            })
            return res
          },
        },
        geo3D: {
          map: 'china',
          zoom: 1,
          roam: false,
          label: { show: false },
          itemStyle: {
            opacity: 0, //.01 // important!
          },
          emphasis: {
            label: { show: false },
            itemStyle: { opacity: 0 },
          },
          regionHeight: 0,
          shading: 'lambert',
          // lambertMaterial: {
          //   detailTexture: mapBg
          // },

          viewControl: {
            zoomSensitivity: false,
            rotateSensitivity: 0,
            projection: 'orthographic',
            autoRotate: false,
            autoRotateAfterStill: 1,
            orthographicSize: 61,
            // minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            // maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            // minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            // maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
          },
          light: {
            //光照阴影
            main: {
              color: '#02fce7', //光照颜色
              intensity: 0.5, //光照强度
              shadow: true, //是否显示阴影
              shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
              alpha: 30,
              beta: 90,
            },
            ambient: {
              color: '#fff',
              intensity: 1,
            },
          },
          zlevel: -8,
        },
        // 要显示的散点数据
        series: [
          {
            // left: 12,
            // top: 22,
            // bottom: 20,
            type: 'map3D',
            map: 'china',
            roam: false,
            data: arr,
            itemStyle: {
              // color: "#4b6f52",
              color: 'transparent',
              borderWidth: 2,
              borderColor: 'transparent', // #6CCEE0
              opacity: 1,
            },
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                //移入时的高亮文本
                show: true,
                color: '#FFF', //显示字体颜色变淡
              },
              itemStyle: {
                // color: "#4b6f52",
                color: 'rgba(3,240,247,0.3)',
              },
            },
            regionHeight: 2.9,
            shading: 'lambert',
            // lambertMaterial: {
            //   detailTexture: mapBg,
            //   textureTiling: 1,
            //   // textureOffset:20
            // },
            viewControl: {
              zoomSensitivity: false,
              rotateSensitivity: 0,
              projection: 'orthographic',
              autoRotate: false,
              autoRotateAfterStill: 1,
              orthographicSize: 61.5,
              // minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              // maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              // minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              // maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              animation: false, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
            },
            label: {
              show: false,
              color: '#FFF',
              position: 'top',
              fontSize: 18,
            },
            light: {
              //光照阴影
              main: {
                color: 'rgb(14,70,82)', //光照颜色
                intensity: 0.1, //光照强度
                shadow: true, //是否显示阴影
                shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
                alpha: 30,
                beta: 90,
              },
              ambient: {
                color: '#fff',
                intensity: 1,
              },
            },
            zlevel: 1,
            zoom: 1,
            scaleLimit: {
              // 限制缩放的比例
              min: 1, // 最小缩放比例
              max: 1, // 最大缩放比例
            },
          },
          {
            type: 'scatter3D',
            data: arr,
            symbol: 'circle',
            symbolSize: 18,
            coordinateSystem: 'geo3D',
            label: {
              show: true,
              position: 'top', // 先指定一个基准位置（如 'top'）
              offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
              // triggerEvent: true,
              formatter: (params) => {
                // console.log('🚀 ~ initChart ~ params:', params)
                const val = params.data.value || []
                let unit = ''
                if (this.btnIndex === 1) unit = '万元'
                else if (this.btnIndex === 2) unit = '台'
                else if (this.btnIndex === 3) unit = '%'
                return val.length
                  ? `{val|${val[2]} ${unit}}\n{name|${
                      params.data.deptName
                    }}`
                  : `{name|${params.data.deptName}}`
              },
              rich: {
                val: {
                  backgroundColor: { image: labelBg },
                  height: 28,
                  minWidth: 70,
                  lineHeight: 28,
                  padding: [0, 10],
                  align: 'center',
                  verticalAlign: 'middle',
                  color: '#fff',
                  fontSize: 23,
                },
                name: {
                  color: '#fff',
                  fontFamily: 'DS-TITLE',
                  fontSize: 21,
                  padding: [6, 0, 0, 0],
                },
              },
            },
            itemStyle: {
              color: 'rgba(217, 94, 0, 1)',
            },
            zlevel: 1,
          },
        ],
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: mapImg, // 图片的 URL
                width: 1330, // 图片宽度
                height: 670, // 图片高度
                // 位置根据实际需求调整
                x: 0,
                y: 0,
              },
              left: 'center',
              top: 'center',
              // zlevel: 0,
            },
          ],
        },
      }
      myChart.setOption(option)
      // 监听地图绑定双击事件（双击进入地图下一级）
      // myChart.on('click', (params) => {
      //   console.log('🚀 ~ 点击 ~ params-->:', params)
      //   console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
      //   if (params.seriesType === 'map3D' && params.data) {
      //     let city =
      //       params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')

      //     console.log('🚀 ~ initChart ~ this.$router:', this.$router)
      //     this.$router.push({
      //       path: '/screen/cityScreen',
      //       query: {
      //         cityName: city,
      //       },
      //     })
      //   }
      // })
      myChart.on('mouseover', (params) => {
        // console.log('🚀 ~ 移入 ~ params:', params)
      })
      myChart.on('mouseout', () => {
        // this.selectedCity = null
      })
      return myChart
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  width: 1300px;
  height: 790px;
  display: flex;
  margin: 0 auto;
  transform: scale(1, 1.15);
  /* transform-origin: 50% 30%; */
}

.top-btns {
  margin-top: 100px;
  margin-left: -180px;
  display: flex;
  justify-content: center;
  z-index: 9999999;
  .btn:not(:last-child) {
    margin-right: 80px;
  }

  .btn {
    font-size: 18px;
    text-align: center;
    padding: 6px 15px;
    font-family: DS-TITLE;
    color: #ccc;
    background-image: url('../../img/btn.png');
    background-size: 100% 100%;
    cursor: pointer;
  }

  .active {
    background-image: url('../../img/btn-active.png');
    background-size: 100% 100%;
  }
}
</style>
