• 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);
    
                },
    

     效果展示:

  • 相关阅读:
    Mysql Select 语句中实现的判断
    SQL根据一个字符串集合循环保存数据库
    SQL语句 不足位数补0
    SVN常见错误
    svn架构
    关于EXCEL显示数字
    exception from hresult:0x8000401A(excel文档导出)
    WIN7安装注意事项
    解决卸载时残留目标文件夹的问题
    Installshield执行多条批处理的方法
  • 原文地址:https://www.cnblogs.com/Kyaya/p/12083775.html
Copyright © 2020-2023  润新知