echarts实现中国地图区域降水量显示

啃火龙果的兔子

已于 2023-07-17 13:05:08 修改

阅读量2.8k

点赞数 1

分类专栏：开发DEMO HTML Echarts 文章标签： vue.js

于 2020-03-19 14:13:03 首次发布

本文链接：https://blog.csdn.net/qq_43592064/article/details/104966534

版权

开发DEMO 同时被 3 个专栏收录

144 篇文章 1 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <script src="./echarts.js"></script>
  <script src="./china.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    #app {
      width: 100%;
      height: 100%;
      background: rgb(58, 4, 4);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #main {
      width: 80%;
      height: 80%;
    }
    .re-load {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #000;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      color: #fff;
      z-index: 999;
      font-weight: bold;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <div @click='initMap' id='main'></div>
    <div @click='reLoad' class="re-load">
      <i class="el-icon-refresh-right"></i>
    </div>
  </div>
  <script type="text/javascript">
    var app = new Vue({
      el: '#main',
      data: function () {
        return {
          map: null,
          myChart: null,
          dataList: []
        }
      },
      mounted() {
        this.dataList = this.changeList();
        this.myChart = echarts.init(document.getElementById('main'));
        var option = {
          //悬停提示
          tooltip: {
            formatter: function (params, ticket, callback) {
              return params.seriesName + '<br />' + params.name + '：' + params.value + '吨/㎡';
            }//数据格式化
          },
          //视图配置
          visualMap: {
            min: 0,
            max: 150,
            left: 'left',
            top: 'bottom',
            text: ['height', 'low'],//取值范围的文字
            inRange: {
              color: ['#fff', '#4f080d']//取值范围的颜色
            },
            show: true//图注
          },
          geo: {
            map: 'china',
            roam: false,//不开启缩放和平移
            zoom: 1.23,//视角缩放比例
            label: {
              normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)'
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: '#F3B329',//鼠标选择区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              name: '降雨量',
              type: 'map',
              geoIndex: 0,
              data: this.dataList
            }
          ]
        }
        this.myChart.setOption(option);

        // echart图表自适应
        window.onresize = () => { 
          this.myChart.resize(); 
        }
        //点击右上角图标,刷新地图数据(非刷新页面)
        $('.re-load').click(()=>{
          this.dataList = this.changeList();
          this.myChart.setOption({
            series: {
              data: this.dataList
            }
          });
        });
      },
      methods: {
        initMap() {
          this.myChart.on('click', (param) => {
            event.stopPropagation()// 阻止冒泡
            this.$message.success(`${param.name}的降水量为: ${param.value} 吨/㎡`);
          })
        },
        randomValue() {
          return Math.round(Math.random() * 70);
        },
        changeList() {
          var arr = [
            { name: "南海诸岛", value: this.randomValue() },
            { name: '北京', value: this.randomValue() },
            { name: '天津', value: this.randomValue() },
            { name: '上海', value: this.randomValue() },
            { name: '重庆', value: this.randomValue() },
            { name: '河北', value: this.randomValue() },
            { name: '河南', value: this.randomValue() },
            { name: '云南', value: this.randomValue() },
            { name: '辽宁', value: this.randomValue() },
            { name: '黑龙江', value: this.randomValue() },
            { name: '湖南', value: this.randomValue() },
            { name: '安徽', value: this.randomValue() },
            { name: '山东', value: this.randomValue() },
            { name: '新疆', value: this.randomValue() },
            { name: '江苏', value: this.randomValue() },
            { name: '浙江', value: this.randomValue() },
            { name: '江西', value: this.randomValue() },
            { name: '湖北', value: this.randomValue() },
            { name: '广西', value: this.randomValue() },
            { name: '甘肃', value: this.randomValue() },
            { name: '山西', value: this.randomValue() },
            { name: '内蒙古', value: this.randomValue() },
            { name: '陕西', value: this.randomValue() },
            { name: '吉林', value: this.randomValue() },
            { name: '福建', value: this.randomValue() },
            { name: '贵州', value: this.randomValue() },
            { name: '广东', value: this.randomValue() },
            { name: '青海', value: this.randomValue() },
            { name: '西藏', value: this.randomValue() },
            { name: '四川', value: this.randomValue() },
            { name: '宁夏', value: this.randomValue() },
            { name: '海南', value: this.randomValue() },
            { name: '台湾', value: this.randomValue() },
            { name: '香港', value: this.randomValue() },
            { name: '澳门', value: this.randomValue() }
          ]
          return arr;
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

啃火龙果的兔子

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
echarts实现中国地图区域降水量显示

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale...
复制链接

扫一扫