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

梦里梦外; 2022-08-30 04:21 194阅读 0赞

## 步骤： ##

***建立dom用于渲染地图组件***

***引入所需js文件***

import echarts from 'echarts'
    require('echarts/map/js/china')//这里import引入也可以

***初始化echarts图表***

const chinachart = echarts.init(this.$refs.map_ref)//用于将图表渲染至dom元素

***定义地图配置项***

const chartOption = { //提示器
              tooltip: { 
                formatter(par) { //这里可自定义提示器内容
                  if (par.name === '台湾' || par.name === '南海诸岛') { 
                    return
                  }
                  if (par.data.type === 'reg') { 
                    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
                }
              ]
            }
            chinachart.setOption(chartOption)
            window.addEventListener('resize', () => { 
              chinachart.resize()
            })

***效果图***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]

**做过echarts可视化的朋友对以上大部分配置项不会陌生，希望可以帮到您。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/65cb31ac0437400d8c903750cde892d5.png