echarts 地图 tooltip 显示图片

echarts yekong

wanjunshijiecom 2021-08-28 at 20.05.47@2x

      var data = [
        {
          name: '北京',
          value: 2
        }, {
          name: '天津',
          value: 5
        }, {
          name: '上海',
          value: 1
        }, {
          name: '重庆',
          value: 0
        }, {
          name: '河北',
          value: 0
        }, {
          name: '河南',
          value: 0
        }, {
          name: '云南',
          value: 0
        }, {
          name: '辽宁',
          value: 0
        }, {
          name: '黑龙江',
          value: 0
        }, {
          name: '湖南',
          value: 0
        }, {
          name: '安徽',
          value: 0
        }, {
          name: '山东',
          value: 0
        }, {
          name: '新疆',
          value: 0
        }, {
          name: '江苏',
          value: 0
        }, {
          name: '浙江',
          value: 0
        }, {
          name: '江西',
          value: 0
        }, {
          name: '湖北',
          value: 0
        }, {
          name: '广西',
          value: 0
        }, {
          name: '甘肃',
          value: 0
        }, {
          name: '山西',
          value: 0
        }, {
          name: '内蒙古',
          value: 0
        }, {
          name: '陕西',
          value: 0
        }, {
          name: '吉林',
          value: 5
        }, {
          name: '福建',
          value: 5
        }, {
          name: '贵州',
          value: 15
        }, {
          name: '广东',
          value: 15
        }, {
          name: '青海',
          value: 0
        }, {
          name: '西藏',
          value: 0
        }, {
          name: '四川',
          value: 0
        }, {
          name: '宁夏',
          value: 0
        }, {
          name: '海南',
          value: 0
        }]
      myChart.setOption({
        series: [{
          type: 'map',
          map: 'china'
        }]
      })
      const tooltipFormatter = function (params) {
        console.log(params)
        return `<div style="width: 100px;height: 46px;background: #0080EE;position: relative">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAmCAYAAAAxxTAbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDRjgyRDBCRkZBNTExRUI5REVGQkJCQkQ3NEExRkNGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDRjgyRDBDRkZBNTExRUI5REVGQkJCQkQ3NEExRkNGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNGODJEMDlGRkE1MTFFQjlERUZCQkJCRDc0QTFGQ0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNGODJEMEFGRkE1MTFFQjlERUZCQkJCRDc0QTFGQ0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77Rw6pAAAGA0lEQVR42rxX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" style="width:24px;position: absolute;left: -30px;" alt="">
        <div style="width: 100px;height: 46px; background: #0080EE;box-shadow:#0759AA 0 0 10px 2px;border-radius: 10px;">
        <div style="font-size: 12px; padding-left:5px;font-family: PingFang;font-weight: 500;color: #FFFFFF;">累计车位数:</div>
          <div style="font-size: 16px; padding-left:5px;font-family: DIN;font-weight: bold;color: #FFFFFF;">${params.data.value}</div>
      </div>
    </div>`
      }
      var option = {
        //地图显示:移动鼠标,显示数据
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          borderWidth: 0,
          padding: 0,
          formatter: tooltipFormatter
        },
        //图例
        visualMap: {
          min: 19000,
          max: 70000,
          right: 10,
          bottom: 40,
          showLabel: !0,
          textStyle: {
            color: 'rgba(167, 194, 240, 1)'
          },
          pieces: [{
            gt: 10,
            lt: 20,
            label: '投放运营',
            color: 'rgba(255, 187, 5, 1)'
          }, {
            gt: 0,
            lt: 10,
            label: '战略部署',
            color: 'rgba(0, 228, 102, 1)'
          }, {
            gt: 0,
            lt: 0,
            label: '',
            color: '#00338F'
          }],
          show: !0
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },
        geo: {
          map: 'china',
          zoom: 1,
          label: {
            normal: {
              show: false,
              color: '#000000'
            },
            emphasis: {
              show: false,
              color: '#292929'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#00338F'
            },
          }
        },
        series: [{
          type: 'map',
          mapType: 'china',
          geoIndex: 0,
          itemStyle: {
            normal: {
              color: '#ccc',
              areaColor: '#00338F',
              borderColor: '#0094D6',
              borderWidth: 0.5,
              label: {
                show: false,
              }
            },
            emphasis: {
              areaColor: false,
              borderColor: '#00338F',
              areaStyle: {
                color: '#0094D6'
              },
              label: {
                show: false,
              }
            }
          },
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          data: data
        }]
      }
喜欢