耀极客论坛

 找回密码
 立即注册
查看: 645|回复: 0

Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 02:05:45 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

实现效果


完整代码+详细注释
  1. ‹template>
  2.   ‹div class="echart">
  3.     ‹div class="content">
  4.       ‹div id="map_cn">‹/div>
  5.     ‹/div>
  6.   ‹/div>
  7. ‹/template>
  8. ‹script>
  9.   import echarts from "echarts";
  10.   import 'echarts/map/js/china.js' //这一步必须引入
  11.   export default {
  12.     data() {
  13.       return {
  14.         //地图中的数据
  15.         dataList: [
  16.           {
  17.             name: "南海诸岛",
  18.             value: 25,
  19.           },
  20.           {
  21.             name: "北京",
  22.             value: 71,
  23.           },
  24.           {
  25.             name: "天津",
  26.             value: 52,
  27.           },
  28.           {
  29.             name: "上海",
  30.             value: 14,
  31.           },
  32.           {
  33.             name: "重庆",
  34.             value: 50,
  35.           },
  36.           {
  37.             name: "河北",
  38.             value: 20,
  39.           },
  40.           {
  41.             name: "河南",
  42.             value: 30,
  43.           },
  44.           {
  45.             name: "云南",
  46.             value: 55,
  47.           },
  48.           {
  49.             name: "辽宁",
  50.             value: 50,
  51.           },
  52.           {
  53.             name: "黑龙江",
  54.             value: 40,
  55.           },
  56.           {
  57.             name: "湖南",
  58.             value: 6,
  59.           },
  60.           {
  61.             name: "安徽",
  62.             value: 96,
  63.           },
  64.           {
  65.             name: "山东",
  66.             value: 75,
  67.           },
  68.           {
  69.             name: "新疆",
  70.             value: 45,
  71.           },
  72.           {
  73.             name: "江苏",
  74.             value: 15,
  75.           },
  76.           {
  77.             name: "浙江",
  78.             value: 8,
  79.           },
  80.           {
  81.             name: "江西",
  82.             value: 78,
  83.           },
  84.           {
  85.             name: "湖北",
  86.             value: 78,
  87.           },
  88.           {
  89.             name: "广西",
  90.             value: 36,
  91.           },
  92.           {
  93.             name: "甘肃",
  94.             value: 25,
  95.           },
  96.           {
  97.             name: "山西",
  98.             value: 140,
  99.           },
  100.           {
  101.             name: "内蒙古",
  102.             value: 85,
  103.           },
  104.           {
  105.             name: "陕西",
  106.             value: 85,
  107.           },
  108.           {
  109.             name: "吉林",
  110.             value: 74,
  111.           },
  112.           {
  113.             name: "福建",
  114.             value: 20,
  115.           },
  116.           {
  117.             name: "贵州",
  118.             value: 74,
  119.           },
  120.           {
  121.             name: "广东",
  122.             value: 47,
  123.           },
  124.           {
  125.             name: "青海",
  126.             value: 45,
  127.           },
  128.           {
  129.             name: "西藏",
  130.             value: 41,
  131.           },
  132.           {
  133.             name: "四川",
  134.             value: 3,
  135.           },
  136.           {
  137.             name: "宁夏",
  138.             value: 7,
  139.           },
  140.           {
  141.             name: "海南",
  142.             value: 7,
  143.           },
  144.           {
  145.             name: "台湾",
  146.             value: 200,
  147.           },
  148.           {
  149.             name: "香港",
  150.             value: 2,
  151.           },
  152.           {
  153.             name: "澳门",
  154.             value: 5,
  155.           }
  156.         ],
  157.         //指定图表的配置项和数据
  158.         option: {
  159.           //标题组件
  160.           title: {
  161.             show: true,
  162.             text: '全国各省份旅游景点(已评级)数量',
  163.             subtext: '截至到2021年12月',
  164.             left: "center",
  165.             top: 16,
  166.           },
  167.           //提示框组件
  168.           tooltip: {
  169.             show: true,
  170.             //触发类型:数据项图形触发
  171.             trigger: 'item',
  172.             padding: 10,
  173.             borderWidth: 1,
  174.             borderColor: '#409eff',
  175.             backgroundColor: 'rgba(255,255,255,0.4)',
  176.             textStyle: {
  177.               color: '#000000',
  178.               fontSize: 12
  179.             },
  180.             //提示框内容格式器
  181.             formatter: (e) => {
  182.               let data = e.data;
  183.               //此处将各等级景点数量表示为0-10内的随机整数
  184.               data.five = Math.random() * 10 | 0;
  185.               data.four = Math.random() * 10 | 0;
  186.               data.three = Math.random() * 10 | 0;
  187.               data.two = Math.random() * 10 | 0;
  188.               data.one = Math.random() * 10 | 0;
  189.               //景点数量 - 五个等级之和
  190.               data.number = data.five + data.four + data.three + data.two + data.one;
  191.               //字符串模板
  192.               let context = `
  193.                ‹div>
  194.                    ‹p>${data.name}‹/p>
  195.                    ‹p>‹span>景点数量 : ‹/span>‹span>${data.number}处‹/span>‹/p>
  196.                    ‹p>‹span>5A级 : ‹/span>‹span>${data.five}处‹/span>‹/p>
  197.                    ‹p>‹span>4A级 : ‹/span>‹span>${data.four}处‹/span>‹/p>
  198.                    ‹p>‹span>3A级 : ‹/span>‹span>${data.three}处‹/span>‹/p>
  199.                    ‹p>‹span>2A级 : ‹/span>‹span>${data.two}处‹/span>‹/p>
  200.                    ‹p>‹span>1A级 : ‹/span>‹span>${data.one}处‹/span>‹/p>
  201.                ‹/div>
  202.             `;
  203.               return context;
  204.             }
  205.           },
  206.           //视觉映射组件(左下角)
  207.           visualMap: {
  208.             show: true,
  209.             left: 26,
  210.             bottom: 40,
  211.             showLabel: true,
  212.             // 是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
  213.             calculable: false,
  214.             // 拖拽时,是否实时更新
  215.             realtime: true,
  216.             align: 'left',
  217.             //各颜色代表的区域
  218.             pieces: [
  219.               {
  220.                 gte: 100,
  221.                 label: "> 100",
  222.                 color: "#FDB669"
  223.               },
  224.               {
  225.                 gte: 50,
  226.                 lt: 99,
  227.                 label: "50 - 99",
  228.                 color: "#FECA7B"
  229.               },
  230.               {
  231.                 gte: 30,
  232.                 lt: 49,
  233.                 label: "30 - 49",
  234.                 color: "#FEE191"
  235.               },
  236.               {
  237.                 gte: 10,
  238.                 lt: 29,
  239.                 label: "10 - 29",
  240.                 color: "#FFF0A8"
  241.               },
  242.               {
  243.                 lt: 9,
  244.                 label: '‹ 10',
  245.                 color: "#FFFFBF"
  246.               }
  247.             ]
  248.           },
  249.           //地理坐标系组件
  250.           geo: {
  251.             //使用 registerMap 注册的地图名称
  252.             map: "china",
  253.             //是否开启鼠标缩放和平移漫游
  254.             roam: true,
  255.             //当前视角缩放比例
  256.             zoom: 1,
  257.             //滚轮缩放的极限控制
  258.             scaleLimit: {
  259.               min: 1, //最小1倍
  260.               max: 3 //最大3倍
  261.             },
  262.             //地图组件离容器的距离
  263.             top: 90,
  264.             left: 'center',
  265.             //图形上的文本标签
  266.             label: {
  267.               show: true,
  268.               fontSize: "11"
  269.             },
  270.             //地图区域的多边形 图形样式
  271.             itemStyle: {
  272.               borderColor: "rgba(0, 0, 0, 0.2)",
  273.               shadowColor: 'rgba(0, 0, 0, 0.2)',
  274.               shadowBlur: 10,
  275.               // 高亮状态(鼠标移入后)的多边形和标签样式
  276.               emphasis: {
  277.                 areaColor: "#f98333",
  278.                 shadowOffsetX: 2,
  279.                 shadowOffsetY: 2,
  280.               },
  281.             }
  282.           },
  283.           series: [
  284.             {
  285.               type: "map",
  286.               roam: true,
  287.               geoIndex: 0,
  288.               data: '',
  289.               label: {
  290.                 show: true,
  291.               }
  292.             }
  293.           ]
  294.         },
  295.       };
  296.     },
  297.     methods: {
  298.       //定义方法 draw_map 绘制中国地图
  299.       draw_map() {
  300.         let myChart = this.$echarts.init(document.getElementById('map_cn'));
  301.         //高亮轮播展示
  302.         var hourIndex = 0;
  303.         var carouselTime = null;
  304.         //setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除
  305.         //使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据
  306.         //carouselTime =setInterval(function(){ //错误写法
  307.         carouselTime = setInterval(() => {
  308.           //dispatchAction echarts的API:触发图表行为
  309.           myChart.dispatchAction({
  310.             type: "downplay", //downplay 取消高亮指定的数据图形
  311.             seriesIndex: 0
  312.           });
  313.           myChart.dispatchAction({
  314.             type: "highlight", //highLight 高亮指定的数据图形
  315.             seriesIndex: 0, //系列index
  316.             dataIndex: hourIndex //数据index
  317.           });
  318.           myChart.dispatchAction({
  319.             type: "showTip", //showTip 显示提示框
  320.             seriesIndex: 0,
  321.             dataIndex: hourIndex
  322.           });
  323.           hourIndex++;
  324.           //当循环到数组当中的最后一条数据后,重新进行循环
  325.           if (hourIndex > this.dataList.length) {
  326.             hourIndex = 0;
  327.           }
  328.         }, 3000);
  329.         //鼠标移入组件时停止轮播
  330.         myChart.on("mousemove", (e) => {
  331.           clearInterval(carouselTime); //清除循环
  332.           myChart.dispatchAction({
  333.             type: "downplay",
  334.             seriesIndex: 0,
  335.           });
  336.           myChart.dispatchAction({
  337.             type: "highlight",
  338.             seriesIndex: 0,
  339.             dataIndex: e.dataIndex
  340.           });
  341.           myChart.dispatchAction({
  342.             type: "showTip",
  343.             seriesIndex: 0,
  344.             dataIndex: e.dataIndex
  345.           });
  346.         });
  347.         //鼠标移出组件时恢复轮播
  348.         myChart.on("mouseout", () => {
  349.           carouselTime = setInterval(() => {
  350.             myChart.dispatchAction({
  351.               type: "downplay",
  352.               seriesIndex: 0,
  353.             });
  354.             myChart.dispatchAction({
  355.               type: "highlight",
  356.               seriesIndex: 0,
  357.               dataIndex: hourIndex
  358.             });
  359.             myChart.dispatchAction({
  360.               type: "showTip",
  361.               seriesIndex: 0,
  362.               dataIndex: hourIndex
  363.             });
  364.             hourIndex++;
  365.             if (hourIndex > this.dataList.length) {
  366.               hourIndex = 0;
  367.             }
  368.           }, 3000);
  369.         });
  370.         //显示地图
  371.         myChart.setOption(this.option);
  372.       },
  373.       //修改echart配制
  374.       setEchartOption() {
  375.         this.option.series[0].data = this.dataList;
  376.       },
  377.     },
  378.     created() {
  379.       this.setEchartOption();
  380.     },
  381.     mounted() {
  382.       this.$nextTick(() => {
  383.         this.draw_map();
  384.       });
  385.     }
  386.   };
  387. ‹/script>
  388. ‹style scoped lang="less">
  389.   .echart {
  390.     width: 100%;
  391.     .content {
  392.       width: 95.8%;
  393.       height: 100px;
  394.       margin: auto;
  395.       #map_cn {
  396.         width: 65%;
  397.         height: 7rem;
  398.         background-color: #eaeaea;
  399.         margin: auto;
  400.       }
  401.     }
  402.   }
  403. ‹/style>
复制代码
要点小结
  1.setTimeout() 与 setInterval() 的区别
  setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只执行一次;
  setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除,多次调用。
  2.使用 setInterval() 方法后,必须使用箭头函数形式而不能用 function
  如果使用 function,后续在该方法中调用 data 中的数据如 console.log(this.dataList.length);会报如下错误(其实就是找不到该数据);

  这是因为 fun()、(function(){ ... })() 或回调函数中的 this 默认都指向 window,而 window 中是找不到你所要用的 data 中的数据的,我们应该改为箭头函数形式。

  以上就是Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示的详细内容,更多关于Vue ECharts 中国地图绘制的资料请关注脚本之家其它相关文章!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:19 , Processed in 0.067884 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表