echarts map地图自定义label上添加文字及图片覆盖物

咖啡有点酷

于 2020-11-12 11:17:53 发布

阅读量1.1w

点赞数 3

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_40295815/article/details/109531593

版权

echarts 专栏收录该内容

28 篇文章

订阅专栏

{
          name: '',
          type: 'effectScatter',
          left: '50',
          coordinateSystem: 'bmap',   // 不是这个底层的换成 geo层即可
          data: convertData(data),
          symbolSize: '20',
          showEffectOn: 'render',
          rippleEffect: {
              brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              show: true,
              formatter(params:any) {
                
                return `{pic|}\n{tline|${'2/-7℃'}}\n{tline|${'西北风3-4级'}}\n{fline|${params.data.name}}`;
              },
              position: 'top',
              backgroundColor: 'rgba(17,25,38,.2)',
              padding: [10, 10],
              borderRadius: 3,
              lineHeight: 25,
              color: '#FFDC6C',
              rich: {
                pic:{
                  backgroundColor: {
                    image: require('@/assets/snow.png')  // 这是vue写法，不是的按原来的写就行
                  },
                  width: 30,
                  height: 30,
                  align:'center',
                },
                fline: {
                  color: '#FFDC6C',
                  align:'center'
                },
                tline: {
                  color: '#FFDC6C',
                  align:'center'
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: '#F85050',
              shadowBlur: 0,
              shadowColor: '#F85050'
            }
          },
          zlevel: 12
        },