vue + echart 云南省地图展示

vue + echart 云南省地图展示

vue + echart 云南省地图展示
云南省地图json ：http://datav.aliyun.com/portal/school/atlas/area_selector

图片:

map.js

云南省地图json ：http://datav.aliyun.com/portal/school/atlas/area_selector

index.vue 代码

直接上代码

<template>
  <div :style="{ height: scrollerHeight, width: scrollerWeight }" ref="charts"></div>
</template>

<script>
import * as echarts from 'echarts';
import YunNan from '../../public/map/yunnan.json';
const dataList = [
  { name: '昆明市', value: 20057.34 },
  { name: '丽江市', value: 15477.48 },
  { name: '大理白族自治州', value: 31686.1 },
  { name: '玉溪市', value: 6992.6 },
  { name: '曲靖市', value: 44045.49 },
  { name: '昭通市', value: 40689.64 },
  { name: '西双版纳傣族自治州', value: 37659.78 },
  { name: '文山壮族苗族自治州', value: 45180.97 },
  { name: '迪庆藏族自治州', value: 55204.26 },
  { name: '怒江傈僳族自治州', value: 21900.9 },
  { name: '保山市', value: 4918.26 },
  { name: '德宏傣族景颇族自治州', value: 5881.84 },
  { name: '临沧市', value: 4178.01 },
  { name: '普洱市', value: 2227.92 },
  { name: '红河哈尼族彝族自治州', value: 2180.98 },
  { name: '楚雄彝族自治州', value: 9172.94 }
];

export default {
  data() {
    return {
    }
  },
  computed: {
    scrollerHeight: function () {
      return (document.documentElement.clientHeight - 250) + 'px'; //自定义高度
    },
    scrollerWeight: function () {
      return (document.documentElement.clientWeight - 550) + 'px'; //自定义宽度
    }
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
    })
  },

  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      const option = {
        title: {
          text: '视力筛查数据大屏',
          subtext: '云南省',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '数据表名称',
            type: 'map',
            map: 'YunNan',
            label: {
              show: true
            },
            data: dataList
          }
        ]
      }

      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("YunNan", YunNan)
      charts.setOption(option);
      charts.on("mouseover", function () { //取消鼠标移入地图区域高亮
        charts.dispatchAction({
          type: 'legendUnSelect'
        });
      });

      // 地图点击事件
      charts.on('click', function (params) {
        // 跳转到新页面 下钻到下一级市县
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        // this.$router.push({ path: '/system/user', query: { name: params.name } })

      });
    },
  }

}
</script>