weixin_52834332 2022-10-29 22:31 采纳率: 77.4%
浏览 126

echarts如何绘制带有涟漪效果的地图?

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>地图</title>
  <script src="../JS/echarts.js"></script>
  <script src="jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var dataMap = [{name: '北京',value: 1867},{name: '天津',value: 2550},{name: '上海',value: 4409},{name: '重庆',value: 1356},{name: '河北',value: 1826},{name: '河南',value: 3398},{name: '云南',value: 4872},
    {name: '辽宁',value: 2713},{name: '黑龙江',value: 2183},{name: '湖南',value: 3635},{name: '安徽',value: 2340},{name: '山东',value: 3548},{name: '新疆',value: 3174},{name: '江苏',value: 1506},
    {name: '浙江',value: 3958},{name: '江西',value: 3165},{name: '湖北',value: 4427},{name: '广西',value: 3224},{name: '甘肃',value: 3900},{name: '山西',value: 3320},{name: '内蒙古',value: 3649},
    {name: '陕西',value: 1138},{name: '吉林',value: 1240},{name: '福建',value: 3205},{name: '贵州',value: 2830},{name: '广东',value: 1770},{name: '青海',value: 3803},{name: '西藏',value: 4037},
    {name: '四川',value: 1624}, {name: '宁夏',value: 3522},{name: '海南',value: 2895},{name: '台湾',value: 2883},{name: '香港',value: 3173},{name: '澳门',value: 4978}]
  $.get('china.json',function(chinaJson){
    echarts.registerMap('chinaMap',chinaJson)
    var option = {
      geo:{
        type:'map',
        map:'chinaMap',
        label:{
          show:true
        }
      },
      visualMap: {
        min: 1000,
        max: 5000,
        calculable: true,
        inRange: {
          color:['rgb(255,255,255)','rgba(225,10,10,0.99)']
        }
      },
      series:[
        {
          name:'各省销量',
          type:'map',
          geoIndex:0,
          data:dataMap
        }
      ]
    }
    mCharts.setOption(option)
  })
</script>
</body>
</html>


最终想要实现在‘湖北省’和“四川省”显示动态涟漪效果,应该如何解决?

  • 写回答

1条回答 默认 最新

  • 禅思院 前端领域优质创作者 2022-11-01 09:35
    关注

    官网上有demo

    评论

报告相同问题?

问题事件

  • 修改了问题 10月30日
  • 修改了问题 10月30日
  • 修改了问题 10月30日
  • 修改了问题 10月30日
  • 展开全部

悬赏问题

  • ¥15 关于#网络#的问题:网络是从楼上引一根网线下来,接了2台傻瓜交换机,也更换了ip还是不行
  • ¥15 资源泄露软件闪退怎么解决?
  • ¥15 CCF-CSP 2023 第三题 解压缩(50%)
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在,全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化