echarts+百度地图_html-js-css

概述<html><head><meta name=‘viewport‘ content=‘initial-scale=1.0,user-scalable=no‘ /><meta http-equiv=‘Content-Type‘ content=‘text/html;charset=utf-8‘ /><title>地图Test</title><style type="text/cs
<HTML><head><Meta name=‘vIEwport‘ content=‘initial-scale=1.0,user-scalable=no‘ /><Meta http-equiv=‘Content-Type‘ content=‘text/HTML;charset=utf-8‘ /><Title>地图Test</Title><style type="text/CSS">HTML{    height:100%;}body{    height:100%;margin:0;padding:0;}.BMap_cpyCtrl {display: none;}.anchorBL {display: none;}#main{height:600px;wIDth:1080px;}</style><script src="./jquery.Js"></script><script src="./echarts.min.Js"></script><script type="text/JavaScript" src="http://API.map.baIDu.com/API?v=2.0&ak=你申请的百度key"></script><script src="./bmap.min.Js"></script></head><body><div ID=‘bMap‘></div><script type=‘text/JavaScript‘>            //初始化数据            //配置样式            var    styleJson=[            {                ‘featureType‘: ‘water‘,‘elementType‘: ‘all‘,‘stylers‘: {                    ‘color‘: ‘#081843‘                }            },{                ‘featureType‘: ‘land‘,‘elementType‘: ‘geometry‘,‘stylers‘: {                    ‘color‘: ‘#082657‘                }            },{                ‘featureType‘: ‘highway‘,‘stylers‘: {                    ‘visibility‘: ‘off‘                }            },{                ‘featureType‘: ‘arterial‘,‘elementType‘: ‘geometry.fill‘,‘stylers‘: {                    ‘color‘: ‘#103963‘                }            },‘elementType‘: ‘geometry.stroke‘,‘stylers‘: {                    ‘color‘: ‘#103963‘,‘lightness‘: -70                }            },{                ‘featureType‘: ‘local‘,‘stylers‘: {                    "visibility": "off"                }            },{                "featureType": "railway","elementType": "all","stylers": {                    "visibility": "off"                }            },{                ‘featureType‘: ‘subway‘,{                ‘featureType‘: ‘building‘,‘stylers‘: {                    ‘color‘: ‘#000000‘                }            },{                ‘featureType‘: ‘all‘,‘elementType‘: ‘labels.text.fill‘,‘stylers‘: {                    ‘color‘: ‘#857f7f‘                }            },‘elementType‘: ‘labels.text.stroke‘,‘stylers‘: {                    ‘color‘: ‘#022338‘                }            },{                ‘featureType‘: ‘green‘,{                ‘featureType‘: ‘boundary‘,‘stylers‘: {                    ‘color‘: ‘#465b6c‘                }            },{                ‘featureType‘: ‘manmade‘,{                ‘featureType‘: ‘label‘,‘stylers‘: {                    ‘visibility‘: ‘on‘,‘color‘: ‘#FFF‘                }            },{                "featureType": "poilabel",{                "featureType": "district","elementType": "labels.text.stroke","stylers": {                    "visibility": "on"                }                }];            //线条颜色            var colors = ["#00A0E9","#F29B76","#F76B8F","#6DF3AC","#CF42E8","#F1EA24"];            $(function () {                                //初始化地图                var bampCharts = echarts.init(document.querySelector("#bMap"));                                options = {                    backgroupcolor:"#091E43",Title : {                        show:false,text: ‘‘,subtext:‘‘,x:‘center‘,textStyle : {                            color: ‘#fff‘                        }                    },tooltip: {                        trigger: ‘item‘                    },toolBox: {                        show: false,right: ‘3%‘,feature: {                            dataVIEw: {Readonly: false},restore: {},saveAsImage: {}                        }                    },bmap:{                        //定义中心点                        center: [119.308069,26.087438],zoom: 8,//地图缩放比例                        roam: true,//开启用户缩放                        //样式                        mapStyle: {                            styleJson: styleJson                        },serIEs:[{                            type:‘map‘,mapType:‘china‘,coordinateSystem:‘bmap‘,data:[{                                        name: ‘福建省‘,value: 20057.34,label: {                                            normal: {                                                show: false,formatter: function (params) {                                                    return params.name + "\n" + params.value;    //地图上展示文字 + 数值                                                },}                                        },itemStyle: {                                            normal: {                                                areacolor: ‘#C1FFC1‘     //地图颜色                                            }                                        }                                    }]                        }]                    }                };                                //实例化地图                bampCharts.setoption(options);                //地图点线传输动画效果                //坐标点集合                var d = [{name:‘清源山‘,longitude:118.618628,latitude:24.957289,isShow:true},{name:‘嵩屿电厂‘,longitude:118.034528,latitude:24.45114,{name:‘厦门三安光电‘,longitude:118.203815,latitude:24.683459,{name:‘龙岩市政府‘,longitude:117.023867,latitude:25.082091,{name:‘厦门海沧自贸区‘,longitude:118.032496,latitude:24.476532,isShow:true}];                                var planePath =                    ‘path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z‘;                var end = { name: ‘‘,position: [119.308069,26.087438],isShow:false};                var ods = [];                var marks = [];                marks.push({                    name: end.name,isShow: end.isShow,value: end.position.concat([100])                });                                d.forEach(function(el) {                    if (!el) return;                    //描线                    ods.push({                        fromname: el.name,toname: end.name,coords: [[el.longitude,el.latitude],end.position]                    });                    //定义坐标点                    marks.push({                        name: el.name,isShow: el.isShow,value: [el.longitude,el.latitude,40]                    });                });                    options.serIEs = [                    {                        type: ‘lines‘,coordinateSystem: ‘bmap‘,zlevel: 2,data: ods,//线上面的动态特效                        effect: {                            show: true,period: 6,trailLength: 0.1,symbolSize: 10,symbol: planePath                        },linestyle: {                            normal: {                                color: function(params) {                                    return colors[params.dataIndex + 1];                                },curveness: 0.2                            }                        }                    },{                        type: ‘effectScatter‘,data: marks,symbolSize: function(val) {                            return val[2] / 5;                        },showEffectOn: ‘render‘,rippleEffect: {                            period: 2,brushType: ‘stroke‘,scale: 3                        },hoverAnimation: true,label: {                            normal: {                                formatter: function (params) {                                    if (params.data.isShow) {                                        var info = ‘\n {strong1|‘ + params.name + ‘}‘                                            + ‘\n\n 排放总量：2341.42‘                                            + ‘\n\n 通讯状态：‘ + ‘{color3|‘ + ‘通讯正常‘ + ‘}‘                                            + ‘\n\n 设备标识：XM-05-TD‘;    //地图上展示文字 + 数值                                        return info;                                    }                                    else {                                        return ‘‘;                                    }                                },position: [-170,-145],show: true,textStyle: {                                    color: ‘#fff‘,size:‘35‘                                },backgroundcolor: {//内容背景图                                    image: ‘/images/prevIEw/popup.png‘                                },//自定义控件（由于label无法解析HTML）                                rich: {                                    //设置控件引用名                                    strong1: {                                        FontSize: 18,FontWeight: ‘bold‘,lineHeight:25                                    },color1: {                                        color:‘#fff701‘//黄色                                    },color2: {                                        color:‘#fe0002‘//红色                                    },color3: {                                        color:‘#18cc47‘//绿色                                    }                                },height: 150,wIDth: 220,lineHeight: 12,padding: [5,10]                            }                        },itemStyle: {                            normal: {                                color: function(params) {                                    return colors[params.dataIndex];                                },shadowBlur: 10,shadowcolor: ‘#333‘                            }                        },zlevel: 1                    }                ];                    //实例化                bampCharts.setoption(options);            })            </script>