echarts中国地图二级联动且多条数据展示

最新推荐文章于 2024-08-05 05:00:00 发布

Spring_lmu

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.7k

点赞数 6

分类专栏：工作总结文章标签： vue.js canvas

本文链接：https://blog.csdn.net/Spring_lmu/article/details/103558494

版权

本文介绍了如何使用echarts的map类型在vue.js项目中实现中国地图的二级联动效果，并展示了如何根据数据动态渲染地图颜色。通过监听地图点击事件，切换省级地图并自定义显示样式。同时，注意到防止事件叠加导致的性能问题，每次更新前需取消原有绑定事件。

摘要由CSDN通过智能技术生成

echarts的map类型使用

最近笔者的公司提出了新的需求，要求将对应的数据呈现在地图上，将对应省份的数据渲染出来（之前是表格的来）。
既然是要画图，那自然是得用到echarts，至少我用的来的就只有这个，其他的也未曾深入研究。而我打开它的文档，随意一翻就发现居然有map的类型，这不正是我想要的嘛。

首先第一个问题就是：省级地图不能动态引入，因为笔者用的是 vue 的项目，所以目前还没想到动态引入的 js 的只能将所有的省全部引入，然后依次再按需切换 echarts 的 mapType。
第二个呢就是说如何联动，通过 echarts 的自带事件监听器，绑定点击事件，监听点击的省份，然后根据点击的内容重新绘制对应的省级地图。
鼠标移入的多项数据展示，option 中有对应的属性可以自定义展示样式和格式，tooltip貌似就是用来做这个的。

tooltip: {
            trigger: 'item',
            formatter: function(params) {
              var toolTiphtml = ''
              for(var i = 0;i<seriesData.length;i++){
                if(params.name==seriesData[i].name){
                  toolTiphtml += seriesData[i].name+':<br/>'
                  for(var j = 0;j<seriesData[i].topT.length;j++){
                    toolTiphtml+=seriesData[i].topT[j].name+':'+seriesData[i].topT[j].value+"<br/>"
                  }
                }
              }
              return toolTiphtml;
            }
          },

根据不同的内容渲染地图的颜色。这个也可通过dataRange 来设置。而且因为笔者有对应的排序需求，所以还得根据用户的点击来切换不同的颜色排序。

dataRange: {
              show: true,
              x: '0px', //图例横轴位置
              y: '30px', //图例纵轴位置
              splitList: sort === 'chain' ? [
                  { start: 80, end: 100, color: 'rgb(255, 66, 93)' },     // 红色
                  { start: 50, end: 80, color: 'rgb(92, 167, 186)' },       // 深蓝色
                  { start: 0, end: 50, color: 'rgb(175, 215, 237)' },       // 蓝色
                  { start: -500, end: 0, color: 'rgb(147, 224, 255)' },        // dd
                  { start: -9999999, end: -500, color: 'rgb(199, 237, 233)' },          // 浅蓝色
              ] : sort === 'money' ? [
                  { start: 100000, end: 9999999, color: 'rgb(255, 66, 93)' },     // 红色
                  { start: 50000, end: 100000, color: 'rgb(92, 167, 186)' },       // 深蓝色
                  { start: 10000, end: 50000, color: 'rgb(175, 215, 237)' },       // 蓝色
                  { start: 2000, end: 10000, color: 'rgb(147, 224, 255)' },        // dd
                  { start: 0, end: 2000, color: 'rgb(199, 237, 233)' },          // 浅蓝色
              ] : [
                  { start: 1000, end: 999999, color: 'rgb(255, 66, 93)' },     // 红色
                  { start: 500, end: 1000, color: 'rgb(92, 167, 186)' },       // 深蓝色
                  { start: 100, end: 500, color: 'rgb(175, 215, 237)' },       // 蓝色
                  { start: 10, end: 100, color: 'rgb(147, 224, 255)' },        // dd
                  { start: 0, end: 10, color: 'rgb(199, 237, 233)'