zoukankan      html  css  js  c++  java
  • echarts地图修改高亮颜色及区域界线颜色

    行政区域地图修改默认鼠标滑过颜色以及省份之间的边界线颜色记录

          myCharts.setOption({
                    tooltip: {
                        triggerOn: 'click',
                        enterable: true,
                        formatter: function(params, ticket, callback) {
                            console.log(params.length)
                            let content = {
                                area: 1,
                                areaName: params.name
                            }
                            let result = that.$axios({
                                method: 'get',
                                url: that.getMapCompany,
                                params: content
                            }).then(res => {
                                console.log(params, content, 'log')
                            })
                            var tipHtml = '';
                            tipHtml = '<div style="200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                            +'<div style="100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                            +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+ params.name +'</span>'+'</div>'
                            +'<div>'
                            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
                            +'公司数量:'+'<span style="color:#f48225;margin:0 6px;">'+3+'</span>'+'个'+'</p>'
                            +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
                            +'被考核主体数量'+'<span style="color:#f4e925;margin:0 6px;">'+4+'</span>'+'个'+'</p>'
                            +'</div>'+'</div>';
                            return tipHtml;
    
                            return result;
                            
                            
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            map: 'china',
                            zoom: 1,
                            label: {
                                show: true,
                                color: 'white',
                                fontSize: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,//边际线大小
                                    borderColor:'#00ffff',//边界线颜色
                                    areaColor:'#09295b'//默认区域颜色
                                },
                                emphasis: {
                                    show: true,
                                    areaColor: '#3066ba',//鼠标滑过区域颜色
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                                }
                                
                            },
                        }
                    ],
                })
    

      

  • 相关阅读:
    解决android模拟器太大,小屏幕无法完全显示的问题
    寡人写的第一个HTML5页面
    android开发环境重装系统之后的配置
    PHP程序的一次重构记录
    重构遗留代码(1):金牌大师
    java加密算法研究
    理解Java常量池
    由一个项目看java TCP/IP Socket编程
    java List分组和排序处理
    JAVA获取方法参数名的分析(一)
  • 原文地址:https://www.cnblogs.com/theblogs/p/13999899.html
Copyright © 2011-2022 走看看