JS,VUE实现echars地图点击事件,根据数值不同显示不同颜色,鼠标悬浮显示省的名称和数值

zhangzuruiqqq

已于 2022-06-14 09:04:35 修改

阅读量1.5k

点赞数 1

分类专栏： js vue 文章标签： javascript vue.js echarts

于 2022-06-13 15:59:04 首次发布

本文链接：https://blog.csdn.net/zhangzuruiqqq/article/details/125261373

版权

js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue

13 篇文章 1 订阅

订阅专栏

一.js版

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="static/js/echarts-4.2.1.min.js"></script>
    <script src="static/js/china.js"></script>
    <script src="static/js/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div id="tan">
        测试
    </div>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1600px;height:750px;"></div>

    <script type="text/javascript">
var tan = document.getElementById('tan');
// 虚拟数据
const data_list = [{name:'江苏',value:6},{name:'西藏',value:8},{name:'安徽',value:118491},{name:'湖北',value:117036},{name:'湖南',value:110666},{name:'广东',value:109915},{name:'浙江',value:69540},{name:'福建',value:45146},{name:'山东',value:42753},{name:'河南',value:31141},{name:'四川',value:30287},{name:'河北',value:29890},{name:'江西',value:23649},{name:'黑龙江',value:20475},{name:'陕西',value:17942},{name:'贵州',value:16019},{name:'吉林',value:15441},{name:'广西',value:11875},{name:'山西',value:11077},{name:'云南',value:9238},{name:'辽宁',value:6538},{name:'甘肃',value:6128},{name:'重庆',value:5883},{name:'内蒙古',value:5},{name:'海南',value:4596},{name:'天津',value:4244},{name:'新疆',value:4125},{name:'上海',value:3429},{name:'宁夏',value:3225},{name:'青海',value:1833},{name:'北京',value:1765}]



const labelOption = {
  // 没有任何事件的显示省名称和数值，不想显示改成false
  show: true,
  formatter: '{c}  {b}',
  fontSize: 16,
  rich: {
    name: {}
  }
};



      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

    var aColor='rgba(43, 145, 183)'
    



      var series = [{
        name: '数据',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: labelOption,
        itemStyle: {
          normal: {

// areaColor: 'rgba(24, 109, 212,0.7)',
color: function (params) {
    console.log(params)
    // 我这里是用数值value判断，也可用params.name判断
    if (params.value <10000) {
        return "#028090"
    
    } else {
        return "#05668D"
    }
},
// 板块边框颜色
borderColor: 'rgba(255, 255, 253)'
},
            emphasis: {
                areaColor: aColor
            }
        },
        data: data_list
    }];




      // 指定图表的配置项和数据
      var option = {
          tooltip: {
            trigger: 'item',
            formatter: '省份：{b}<br/>数值：{c}'
        },
          legend: {
              orient: 'vertical',
              top: 'bottom',
              left: 'right',
              data: ['唐山'],
              textStyle: {
                  color: '#fff'
              },
              selectedMode: 'multiple'
          },
      
          series: series
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      // 鼠标滑过板块事件
      myChart.on('mouseover', function(params) {
    console.log(params.name)

});

// 点击板块事件
      myChart.on('click', function(params) {
 tan.innerHTML= params.name
  console.log(params.value);
});
    </script>
  </body>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      html,body{
          width: 100%;
          height: 100%;
      }
      #main{
          /* 背景颜色 */
          background-color: pink;  
      }
      #tan{
        width: 200px;
        height: 400px;
        background-color: green;
        position: absolute;
        top: 200px;
        z-index: 999;
        color: #fff;
      }
  </style>
</html>

效果图

在这里插入图片描述

二.vue版
1全局安装依赖

npm install echarts --save

2.main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在路由中引入地图相关组件index.vue

import 'echarts/map/js/china'

const echarts = require('echarts')

index.vue

<template>
<div>
    <!-- 地图 -->
  <div id="personDetail" ref="personDetail" 
   :style="{ height: screenHeight,width:'100%' }"
   ></div>
<!-- 卡片 -->
<div  class="box-card" v-show="CardShow">
   <el-card >
  <div slot="header" class="clearfix">
    <span>{{card.name}}</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="CardShow=false">隐藏</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
  
</el-card>
<!-- 时间组件 -->
<div class="block">
    <el-date-picker
      v-model="value1"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']"
      @change="changeTime($event)"
      >
    </el-date-picker>
  </div>
</div>

</div>
</template>
<script>
import 'echarts/map/js/china'

const echarts = require('echarts')
export default {
    name:'Ce',
    data() { // 定义数据项
        return {
            data_list: [{ name: '江苏', value: 6 }, { name: '西藏', value: 8 }, { name: '安徽', value: 118491 }, { name: '湖北', value: 117036 }, { name: '湖南', value: 110666 }, { name: '广东', value: 109915 }, { name: '浙江', value: 69540 }, { name: '福建', value: 45146 }, { name: '山东', value: 42753 }, { name: '河南', value: 31141 }, { name: '四川', value: 30287 }, { name: '河北', value: 29890 }, { name: '江西', value: 23649 }, { name: '黑龙江', value: 20475 }, { name: '陕西', value: 17942 }, { name: '贵州', value: 16019 }, { name: '吉林', value: 15441 }, { name: '广西', value: 11875 }, { name: '山西', value: 11077 }, { name: '云南', value: 9238 }, { name: '辽宁', value: 6538 }, { name: '甘肃', value: 6128 }, { name: '重庆', value: 5883 }, { name: '内蒙古', value: 5 }, { name: '海南', value: 4596 }, { name: '天津', value: 4244 }, { name: '新疆', value: 4125 }, { name: '上海', value: 3429 }, { name: '宁夏', value: 3225 }, { name: '青海', value: 1833 }, { name: '北京', value: 1765 }],
           
            screenHeight: document.documentElement.clientHeight * 0.6, // 屏幕高度
            myChinaMap: {},
            card: {
                name:''
            },
            CardShow: false,
            value1: ''
            // screenHeight:'600px', // 屏幕高度
           
        }
    },
    mounted() {
        console.log(this.screenHeight)
        let myChart = this.$echarts.init(this.$refs.personDetail);
        const labelOption = {
            show: true,
            //   rotate: 90,
            formatter: '{c}  {b}',
            fontSize: 16,
            color: '#fff',
            rich: {
                name: {}
            }
        };

        var series = [{
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: labelOption,
            itemStyle: {
                normal: {

                    // areaColor: 'rgba(24, 109, 212,0.7)',
                    color: function (params) {
                        console.log(params)
                        // 我这里是用数值value判断，也可用params.name判断
                        if (params.value <10000) {
                            return "#028090"
                        
                        } else {
                            return "#05668D"
                        }
                    },
                    // 板块边框颜色
                    borderColor: 'rgba(255, 255, 253)'
                },
                emphasis: {
                    // 鼠标悬浮在板块上的颜色
                    areaColor: 'rgba(43, 145, 183)'
                }
            },
            data: this.data_list
        }];

        let option = {
            // 鼠标悬浮出现黑框
            tooltip: {
                trigger: 'item',
                formatter: '省份：{b}<br/>数值：{c}'
            },
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                // data: ['西安 Top3', '西宁 Top3', '银川 Top3'],
                data: ['唐山'],
                textStyle: {
                    color: '#fff'
                },
                selectedMode: 'multiple'
            },
            series: series
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // 点击事件返回省名
        const _this = this
        this.$nextTick(() => {
            _this.myChinaMap = echarts.init(this.$refs.personDetail)

            _this.myChinaMap.on('click', function (param) {
                _this.CardShow=true
                console.log(param.name)
                 _this.card.name =param.name
            })
           
        })



    },
    methods: {
        changeTime(e) {
            console.log(e)
        }
  }
};
</script>
<style scoped lang="less">
html,body{
    width: 100%;
    height: 100%;
}
#personDetail {
  height: 100%;
  min-height: 700px;
  width: 100%;
    // background: url(../../assets/map_bg.jpg) no-repeat center;

}
// 卡片
.box-card{
 width: 200px;
        height: 400px;
        // background-color: green;
        position: absolute;
        top: 200px;
        z-index: 999;
        // color: #fff;
}
</style>

在这里插入图片描述

zhangzuruiqqq

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS,VUE实现echars地图点击事件,根据数值不同显示不同颜色,鼠标悬浮显示省的名称和数值

一.js版效果图二.vue版1全局安装依赖2.main.js中引入3.在路由中引入地图相关组件index.vueindex.vue
复制链接

扫一扫

专栏目录