Echarts--省地图

main.js 导入
import china from ‘echarts/map/js/china.js’

this.myChart2 = window.Echarts.init(document.getElementById('china')); 
      let data=this.mapdata
      this.myChart2.setOption({ // 进行相关配置
          backgroundColor: "#fff",
          tooltip: {
                    trigger: 'item',
                    formatter: function(data){
                                // console.log(data);
                                if( !isNaN(data.value) ){
                                    return data.name+":"+data.value +'%';
                                }
                            }
          }, // 鼠标移到图里面的浮动提示框
          visualMap: {
            min: 0,
            max: 100,
            itemWidth: 15,
            itemHeight: 70,
            color: ['rgba(84,127,229,1)', 'rgba(84,127,229,8)', 'rgba(84,127,229,6)', 'rgba(84,127,229,.4)', 'rgba(84,127,229,.2)'],
            inRange: {
              color: ['#8dacf5', '#547fe5']
            },
            left: 'left',
            bottom: '20px',
            text: ['高', '低'], // 文本,默认为数值文本
            calculable: false,
            orient:'horizontal'
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: false, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '人数占比', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: data
            }
          ]
        })  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值