vue中使用echarts实现地图颜色渐变及自定义浮窗内容

芝士焗红薯

已于 2022-08-12 11:22:40 修改

阅读量4.3k

点赞数 1

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

于 2022-05-30 15:25:08 首次发布

本文链接：https://blog.csdn.net/weixin_44320032/article/details/125046699

版权

本文介绍了如何在Vue项目中利用ECharts实现地图颜色渐变和自定义浮窗内容。首先简化了地图样式，只保留边界颜色和填充颜色。接着通过调整data的结构和 formatter 方法，实现了颜色渐变效果。最后，更新了 formatter 以展示自定义的浮窗内容，从而完成自定义地图展示的功能。

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

在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客，总结了echarts的一些简单用法。这篇文章，一个是在原来的自定义浮窗内容上实现了地图的颜色渐变，一个是简化了地图的样式。

1.简化地图样式

上篇文章地图的样式感觉是带点发光的虚影，是立体的，具体代码如下（写在geo里）：

// 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color:'#4a9de4' // 0% 处的颜色
              },
              {
                offset: 1,
                color:'#4a9de4' // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          },
          shadowColor: '#83c4f3',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: '#0984e3',
          borderWidth: 0
        }
      }

具体每行代码实现了什么样式，我没有研究。

因为我们要实现地图的颜色渐变，所以只需要地图有最简单的样式，即只需要设置地图的边界颜色、填充颜色。

itemStyle: {
  normal: {
    // 地图边界颜色
    borderColor: '#fff',
    // 地图区域背景颜色
    areaColor: '#AAD5FF',
  },
  // 鼠标放上去高亮的样式
  emphasis: {
    // 鼠标放上去地图区域背景颜色
    areaColor: '#0984e3',
    borderWidth: 0
  }
}

这样就实现了一个地图填充蓝色，高亮深蓝色，边界为白色的地图。