Echart 地图 单独显示某个选中效果,高亮

最开始看网上说设置数据中的selected: true,但发现无效,
然后下图是修改后代码,设置数据中的selected: true, 原本选中样式是写在geo里,然后coordinateSystem: ‘geo’, 这样引用,导致无法生效。

     事件名称() {
        let self = this;
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
        let mapName = pinyin.getFullChars(this.provinceName).toLowerCase()
        let provinceName =  ‘地图json文件’// 地图json文件
        echarts.registerMap('china', provinceName);
        let options = { 
          series: [{
            type: 'map',
            geoIndex: 0,
            showLegendSymbol: false, // 存在legend时显示
            data:[
                {name: '广州市', selected: true, value: 100 }
            ],
            zlevel: 1,
            map: 'china', // 表示中国地图
            center: [中心经纬度],
            roam: true,
            scaleLimit:{min:1,max:5},
            zoom: 2,
            label: {
              normal: {
                show: false, // 是否显示对应地名
              },
              emphasis: {
                show : true,
                textStyle : {
                    color : 'rgba(0,0,0,1)'
                }
              }
            },
            // 关键代码
            itemStyle: {
              normal: {
                areaColor: '#fdefdd',
                shadowBlur: 1,
                borderWidth: 0.5,//设置外层边框
                borderColor: '#347b68',//轮廓颜色
                shadowColor: '#a9c5c5'//轮廓阴影颜色
              },
              emphasis: {
                areaColor: '#f7f4ed',
                shadowBlur: 10,
              }
            }
          }]
        };
        myChart.setOption(options); 
      },
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值