百度echart的简单使用

Author Avatar ZTFtrue 发表于 • 2018年03月30日 16:06 • 共 • 561 • 次浏览

china 地图地址:https://github.com/ZTFtrue/blog-file/blob/master/china.geojson
这个东西网上轻松能拿的到,不知道测绘局为什么禁止下载?

就这么用

  drawMap() {
            // 基于准备好的dom,初始化echarts实例
            let map = echarts.init(document.getElementById('map'));
            // 绘制图表
            const usaJson = require('../map-data/china.json');
            echarts.registerMap('china', usaJson);
            map.showLoading();

            map.hideLoading();

            echarts.registerMap('USA', usaJson, {//这个是百度的美国地图  
                Alaska: {
                    // 把阿拉斯加移到美国主大陆左下方
                    left: -131,
                    top: 25,
                    width: 15
                },
                Hawaii: {
                    left: -115, // 夏威夷
                    top: 20,
                    width: 5
                },
                'Puerto Rico': {
                    // 波多黎各
                    left: -76,
                    top: 26,
                    width: 10
                }
            });
            let dataPoint = [
                {
                    name: '大庆',
                    value: [104.35851932200904, 37.40123159456249, 50]
                },
                { name: '武汉', value: [-114.31, 30.52, 273] },
                { name: '合肥', value: [-117.27, 31.86, 229] },
                { name: '菏泽', value: [-87.359296, 35.00118, 194] },
                { name: '廊坊', value: [116.7, 39.53, 193] },
                { name: '衢州', value: [118.88, 28.97, 177] }
            ];
            let option = {
                title: {
                    text: 'USA Population Estimates (2012)',
                    subtext: 'Data from www.census.gov',
                    // sublink: 'http://www.census.gov/popest/data/datasets.html',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function(params) {
                        let value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return params.seriesName + '<br/>' + params.name + ': ' + value;
                    }
                },
                // visualMap: {
                //     left: 'right',
                //     min: 500000,
                //     max: 38000000,
                //     inRange: {
                //         color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                //     },
                //     text: ['High', 'Low'], // 文本,默认为数值文本
                //     calculable: true
                // },
                toolbox: {
                    show: true,
                    // orient: 'vertical',
                    left: 'left',
                    top: 'top',
                    feature: {
                        // dataView: {readOnly: false},
                        restore: {}
                        // saveAsImage: {}
                    }
                },
                geo: {
                    map: 'USA',

                    // zoom: 1,//重置的时候不要设置这个地方 https://github.com/ecomfe/echarts/issues/6333

                    roam: true,
                    scaleLimit: {
                        min: 1
                    },
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#EFEFEF',
                            borderColor: '#CCC'
                        },
                        emphasis: {
                            areaColor: '#E5E5E5'
                        }
                    }
                },
                series: [
                    {
                        name: 'USA',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbolSize: function(val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: { label: { show: true } },
                            normal: {
                                color: '#0099CC'
                            }
                        },
                        // 文本位置修正
                        textFixed: {
                            Alaska: [20, -20]
                        },
                        data: dataPoint
                    }
                ]
            };

            map.setOption(option, true);
            map.on('click', params => {
                console.log(map);
                if (params.geoIndex !== undefined) {
                    let event = params.event.event;
                    let pageX = event.layerX;
                    let pageY = event.layerY;
                    //  http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel
                    let a = map.convertFromPixel({geoIndex: params.geoIndex}, [pageX, pageY]);
                    dataPoint.push({ name: ' ', value: [a[0], a[1], 273] });

                    // echarts.registerMap('china', usaJson);
                    map.setOption(option, false);//  点击加点设置数据
                }
            });
            window.addEventListener('resize', function() {
                map.resize();
            });
        }
最后编辑于 • 2018年03月30日 16:06 •  

你尚未登录,无法进行回复。