VUE之Echarts地图引入及配置项详解_vue echarts visualmap

            const htmlStr = par.name + '&nbsp&nbsp&nbsp' + '注册' + par.data.value + '人' +
            '<br>' + '排名' + '&nbsp&nbsp&nbsp' + par.data.rank + '<br>' + '占比' +
            '&nbsp&nbsp&nbsp' + par.data.propor + '%'
            return htmlStr
          }
        }
      },
      visualMap: {//这里为地图图例
        show: true,
        min: 40,
        max: 2100,
        left: 10,
        bottom: 10,
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: false,
        orient: 'horizontal',
        seriesIndex: [0],
        inRange: {
          color: ['#C4EBFF', '#009CFF']//图例色域
        },
        pieces: [//图例区块
          { gt: 300000, lte: 2000000 },
          { gt: 10000, lte: 300000 },
          { gt: 5000, lte: 10000 },
          { gt: 2000, lte: 5000 },
          { gt: 1100, lte: 2000 },
          { gt: 900, lte: 1100 },
          { gt: 700, lte: 900 },
          { gt: 500, lte: 700 },
          { gt: 300, lte: 500 },
          { gt: 50, lte: 300 },
          { gt: 0, lte: 50 }
        ]
      },
      geo: { // 地理坐标系组件用于地图的绘制
        map: 'china', // 表示中国地图
        roam: false, // 是否开启鼠标缩放和平移漫游
        zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
        label: {
          show: false
        },
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            borderWidth: 1,
            borderColor: '#F6FBFF'
            // areaColor: '#C4EDFA'
          },
          // borderColor: 'rgba(0, 0, 0, 0.2)',
          emphasis: { // 高亮状态下的多边形和标签样式
            shadowBlur: 20,
            areaColor: '#2B91B7',
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [
        {
          name: '',
          type: 'map',
          map: 'china',
          geoIndex: 0,
          label: {
            show: false
          },
          emphasis: {
            show: true
          },
          data: newArr
        },
        {//此处为地图气泡
          name: '点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin',
          symbolSize: [60, 60],//气泡宽高
          tooltip: {
            show: false
          },
          label: {//气泡内配置
            normal: {
              show: true,
              textStyle: {//字体
                color: 'black',
                fontSize: 11
              },
              formatter(val) {//自定义显示内容（格式化）
                if (val.data.type === 'tradeNum') {
                  const htmlVal = val.name + '\n' + val.data.data + '\n' + '人'
                  return htmlVal
                }
              }
            }
          },
          itemStyle: {//气泡样式配置
            normal: {
              color: '#FFDF25', // 标志颜色
              opacity: 1
            }
          },
          hoverAnimation: true,
          zlevel: 1,
          data: arr

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。