第五周总结

<template>
  <div>
    <div ref="chart2" style="width: 1500px;height:710px;margin: auto;"></div>
  </div>

</template>

<script>
import {mapData} from "../assets/mapData.js"
  export default {
    data() {
        return{
    dataList: [
        { ename: "beijing", name: "北京市" ,value:1},
        { ename: "tianjin", name: "天津市" ,value:1},
        { ename: "shanghai", name: "上海市" ,value:1},
        { ename: "chongqing", name: "重庆市" ,value:1},
        { ename: "hebei", name: "河北省" ,value:1},
        { ename: "henan", name: "河南省",value:1},
        { ename: "yunnan", name: "云南省" ,value:1},
        { ename: "liaoning", name: "辽宁省" ,value:1},
        { ename: "heilongjiang", name: "黑龙江省" ,value:1},
        { ename: "hunan", name: "湖南省",value:1},
        { ename: "anhui", name: "安徽省" ,value:1},
        { ename: "shandong", name: "山东省" ,value:1},
        { ename: "xinjiang", name: "新疆维吾尔自治区" ,value:1},
        { ename: "jiangsu", name: "江苏省" ,value:1},
        { ename: "zhejiang", name: "浙江省" ,value:1},
        { ename: "jiangxi", name: "江西省" ,value:1},
        { ename: "hubei", name: "湖北省" ,value:1},
        { ename: "guangxi", name: "广西壮族自治区",value:1},
        { ename: "gansu", name: "甘肃省" ,value:1},
        { ename: "shanxi", name: "山西省" ,value:1},
        { ename: "neimenggu", name: "内蒙古自治区" ,value:1},
        { ename: "shanxi1", name: "陕西省" ,value:1},
        { ename: "jilin", name: "吉林省" ,value:1},
        { ename: "fujian", name: "福建省",value:1 },
        { ename: "guizhou", name: "贵州省" ,value:1},
        { ename: "guangdong", name: "广东省" ,value:1},
        { ename: "qinghai", name: "青海省",value:1 },
        { ename: "xizang", name: "西藏自治区" ,value:1},
        { ename: "sichuan", name: "四川省" ,value:1},
        { ename: "ningxia", name: "宁夏回族自治区" ,value:1},
        { ename: "hainan", name: "海南省",value:1 },
        { ename:"*",name: "台湾省",value:0},
        { ename: "xianggang", name: "香港特别行政区" ,value:1},
        { ename: "aomen", name: "澳门特别行政区",value:1 },
      ],
      cityList:[
           { Cname: "北京市" ,value:[116.404,39.914,459]},
           { Cname: "天津市" ,value:[117.209,39.090,164]},
           { Cname: "上海市" ,value:[121.481,31.235,508]},
           { Cname: "重庆市" ,value:[106.553,29.563,190]},
           { Cname: "长春" ,value:[125.332,43.821,88]},
           { Cname: "大连" ,value:[121.620,38.918,77]},
           { Cname: "武汉" ,value:[114.310,30.598,282]},
           { Cname: "广州" ,value:[113.266,23.133,290]},
           { Cname: "南京" ,value:[118.801,32.064,191]},
           { Cname: "成都" ,value:[104.073,30.578,373]},
           { Cname: "西安" ,value:[108.949,34.348,159]},
           { Cname: "香港" ,value:[114.174,22.280,53]},
      ],
        };
    },
    mounted() {
      this.initEchart()
    
    },
    methods: {
      initEchart() {
      let dataList = this.dataList;
      const _this = this;
      var myChart = this.$echarts.init(this.$refs.chart2);
      this.$echarts.registerMap("chinaMap",mapData)
      var option = {
        tooltip: {
          //数据格式化
          formatter: function(params, callback) {
            if(params.data.Cname)
            {
              return (
              params.seriesName + "<br />" + params.data.Cname
              //  + "：" + params.value
              );
            }else{
              return (
              params.seriesName + "<br />" + params.name
              //  + "：" + params.value
              );
            }
            
          },
        },
        visualMap: {
          min: 0,
          max: 500,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "blue"], //取值范围的颜色
          },
          show: false, //图注
        },
        geo: {
          map: 'chinaMap', //引入地图数据
          roam: true, //不开启缩放和平移
          zoom: 1, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 255)",
            },
            emphasis: { //高亮的显示设置
              areaColor: "skyblue", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
          {
             name: "城市",
            type:"effectScatter",
            data:this.cityList,
            coordinateSystem:"geo",
            rippleEffect:{
              number:2
            }
          
          }
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function(params) {
        if(params.data.Cname)
        {
          _this.$router.push({
          path: "/subway",
          query: { provinceName: params.data.ename, province: params.Cname },
          });
          // location.href="/subway.html";
          alert("Sdsa")
          return;
        }

        if(params.data.ename=='*'){
          alert('暂无' + params.name + '地图数据');
          return;
        }else
        if(!(params.data.ename=='beijing'||params.data.ename=='tianjin'||params.data.ename=='chongqing'||params.data.ename=='shanghai')&&params.value>=1)
        {
          _this.$router.push({
          path: "/province",
          query: { provinceName: params.data.ename, province: params.name },
          });
          return;
          
        }else
          {
             alert('此省份暂无地铁');
          return;
          }

        
       
      });
    },
    },
    watch: {},
    created() {
    }
  }
</script>