• echarts 添加自定义label标签


    1.echarts 自定义标签

    注:当设置visualMap的后,给覆盖regions单独定义的值(如果data 中没有regions的地区 则无妨,我这个是从data中删除'青岛',但是lable 无法正常显示了,如有哪位大神有好的方法,请赐教)

     initChart(id,data){
                    // console.log(data);
                    let obj = echarts.init(document.getElementById(id));
    
                    const geoCoordMap = {
                        '济南市': [117,36.65 ],
                        '青岛市': [120.33,36.07 ],
                        '淄博市': [118.05,36.78 ],
                        '枣庄市': [117.57,34.86 ],
                        '东营市': [118.49,37.6 ],
                        '烟台市': [121.0,37.52 ],
                        '潍坊市': [119.1,36.62 ],
                        '济宁市': [116.59,35.38 ],
                        '泰安市': [117.13,36.0 ],
                        '威海市': [122.3,37.5],
                        '日照市': [119.46,35.42 ],
                        '滨州市': [118.03,37.4],
                        '德州市': [116.29,37.45 ],
                        '聊城市': [115.97,36.45 ],
                        '临沂市': [118.35,35.05 ],
                        '菏泽市': [115.43,35.24 ],
                        '莱芜市': [117.67,36.2 ],
                    }
                    const convertData = function(data) {
                        var res = [];
                        for (var i = 0; i < data.length; i++) {
                            var geoCoord = geoCoordMap[data[i].region];
                            if (geoCoord) {
                                res.push({
                                    value: geoCoord.concat(data[i].value),
                                    name: data[i].region,
                                    managercount:data[i].managercount,
                                    fundcount:data[i].fundcount,
                                });
                            }
                        }
                        return res;
                    };
    
                    let option = ({ // 进行相关配置
                        visualMap: {  //各市区的颜色由value值得大小定
                            show:false,
                            text: ['高', '低'],
                            showLabel: true,
                            seriesIndex: [0],
                            min: 1,
                            max: 300,
                            inRange: {
                                color:[ '#2ab0fc','#0195f1', '#047ad7',]
                            },
    
                        },
                        geo: {
                            map: '山东',
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: '#83caf5',
                                    borderColor: '#fff',
                                },
                                emphasis: {
                                    areaColor: '#aed6f2',
                                }
                            },
                            regions: [{  //单独定义青岛市的颜色
                                name: '青岛市',
                                value:this.qdVal.managercount,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#fe9910',
                                    }
                                }
                            }],
                        },
                        series: [
                            {
                                type: 'map',
                                map: '山东',
                                geoIndex: 0, //此处地图为geo的第一个值
                                data:data,
                            },
                            {
                                name:'山东',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                symbol:'pin',
                                symbolSize:1,
                                label:{ //标签样式设置
                                    normal:{
                                        show:true,
                                        formatter:function(params){ //标签内容
                                            return  params.name+':'+params.data.managercount+','+params.data.fundcount
                                        },
                                        lineHeight: 20,
                                        backgroundColor:'rgba(255,255,255,.9)',
                                        borderColor:'#80cffd',
                                        borderWidth:'1',
                                        padding:[5,15,4],
                                        color:'#000000',
                                        fontSize: 14,
                                        fontWeight:'normal',
                                    },
                                },
                                data:convertData(data),
                            }
                        ]
                    })
    
                    obj.setOption(option);
    
                },
    

     效果展示:

  • 相关阅读:
    yum -y install python-devel
    安装xampp之后报错XAMPP: Starting Apache...fail.
    mysql 监控及优化——转载自http://www.cnblogs.com/suansuan/
    jmeter做http请求时报错
    soapui打开即报错------连接不上Internet
    jmeter遇到的问题:java.net.ConnectException: Connection refused: connect
    idea常用设置汇总
    intellij idea参数提示param hints
    intellij高亮字体背景颜色
    idea去除mybatis的xml那个恶心的绿色背景
  • 原文地址:https://www.cnblogs.com/Kyaya/p/12083775.html
Copyright © 2020-2023  润新知