使用Echarts踩过的坑

我曾经多次感慨，Echarts太强大了，想要的内容几乎都能在配置项中找到。

但也正是这一点，让我有点儿措手不及，配置项实在是太多了，很多时候不知道该用哪一个。今天我就将自己在使用过程中踩过的坑来一一描述。

一、世界地图，使用visalMap，点击国家后，再点击图例，点击过的国家显示黄色。

这是困扰了我大半天的一个问题，因为正是这个黄色，在我们的项目中配得上一个bug，因为刚好跟我们渲染的颜色重合了。还有一个小问题，我这个图例点击之后，颜色特别浅，这个是需要调整的。

我的配置项是这样写的：

        visualMap: {type: 'piecewise',realtime: false,show: false,calculable: true,textStyle: {color: '#666',fontSize: 12,},right: 16,top: 64,align: 'left',itemWidth: 8,// 鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。// hoverLink: false,pieces: [{gte: 2.1, label: '危急', symbol: 'circle', color: '#B32424'},{gte: 1.5, lte: 2.1, label: '高危', symbol: 'circle', color: '#FF3333 '},{gte: 0.5, lte: 1.5, label: '中危', symbol: 'circle', color: '#FF9F40'},{lte: 0.5, label: '低危', symbol: 'circle', color: '#FFCB48'}],},

场景：点击某个国家，再点击图例，咦，点击过得国家颜色变为了黄色。具体图片可参考我的另一篇文章：Echarts 5实现世界地图思路及踩过的坑（含详细代码+图表自适应方案）_Delicia_Lani的博客-CSDN博客

解决思路：其实在找到最后的解决方案之前，我有一番探索，在思考如果能够保证这个图例的点击事件不触发，那颜色既不会变浅，国家的颜色也不会变为黄色。在这一实现思路上探索了好久，最终发现，没法监听到visalMap的事件。其实也找到了几个，我应用后无效。

就是这儿：ECharts视觉映射组件的触发事件_w3cschool

解决方案：第一反应肯定是有哪个配置项可以更改这个黄色，点击图例后的颜色应该也是可以调整的。无奈我找了好久也没找到。（可能是我眼不好使，有找到该配置项的小伙伴可以联系我）。

最终的解决方案是写一个div，展示假的图例，将原来的真正图例覆盖。这个时候不知道小伙伴们有没有疑问。地图上的国家到底是显示哪个颜色，是由visalMap中的配置项中的值的范围来控制的，现在如果将原来的图例覆盖，那各个国家如何对应上来显示什么颜色呢？

这里只是覆盖，原本的visalMap配置项保持不变，这样是能做到国家与图例颜色对应的。使用该解决方案，既解决了点击图例之后，颜色变浅的问题，又解决了图例无法点击，保证点击后的国家颜色不变的问题。

二、世界地图中，点击某个国家后，颜色变为黄色

这个问题看起来跟第一个问题有点儿类似，确实是这样，甚至最终的解决方案也是用的同一种，但这是我遇到的世界地图中的第一个问题，所以也把当时的一个实现思路记在这里。

最后是发现有API表示点击某个国家后的颜色变化的。当时我是这样解决的。我这里是要判断原本有没有颜色，如果有保持原来的颜色不变，如果没有，将设置的颜色覆盖默认的黄色。

 this.$refs.worldMapChart.chart.on('click', function(params) {if (params?.event?.target?.states?.select?.style) {params.event.target.states.select.style.fill = params.color ? params.color : '#F7F7F7';}});

重点：问题一二的解决方案应该用这个配置项：

series: [{select: {label: {show: false},itemStyle: {areaColor: '#F7F7F7'}},}
]