基于echarts的中国地图

Posted wasbg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于echarts的中国地图相关的知识,希望对你有一定的参考价值。

html

<div id="china_map" style=‘margin-top: -120px;width:100%x;height:600px;‘></div>


以下是echarts地图相关代码
dataList () {
           // 初始化echarts实例
            this.chinachart = echarts.init(document.getElementById(‘china_map‘))
            // 进行相关配置
            var chartOption = { 
                tooltip: { // 鼠标移到图里面的浮动提示框
                // formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatter
                    formatter (params) { 
                        // params.data 就是series配置项中的data数据遍历
                        let localValue,
                        perf,
                        downloadSpeep,
                        usability,
                        point
                        if (params.data) {
                        localValue = params.data.value
                        perf = params.data.perf
                        downloadSpeep = params.data.downloadSpeep
                        usability = params.data.usability
                        point = params.data.point
                        } else { // 为了防止没有定义数据的时候报错写的
                        localValue = 0
                        perf = 0
                        downloadSpeep = 0
                        usability = 0
                        point = 0
                        }
                        let htmlStr = `
                        <div style=‘font-size:18px;‘> ${params.name}</div>
                        <p style=‘text-align:left;margin-top:-10px;‘>
                            区域对应数据value:${localValue}<br/>
                            性能perf:${perf}<br/>
                            下载速度downloadSpeep:${downloadSpeep}<br/>
                            可用性usability:${usability}<br/>
                            监测点数point:${point}<br/>
                        </p>
                        `
                        return htmlStr
                    }
                // backgroundColor:"#ff7f50",//提示标签背景颜色
                // textStyle:{color:"#fff"} //提示标签字体颜色
                },
                // visualMap的详细配置解析:https://echarts.baidu.com/option.html#visualMap
                visualMap: { // 左下角的颜色区域
                    type: ‘piecewise‘, // 定义为分段型 visualMap
                    min: 0,
                    max: 1000,
                    itemWidth: 40,
                    bottom: 60,
                    left: 20,
                    pieces: [ // 自定义『分段式视觉映射组件(visualMapPiecewise)』的每一段的范围,以及每一段的文字,以及每一段的特别的样式
                        {gt: 900, lte: 1000, label: ‘非常好‘, color: ‘#6ad86e‘}, // (900, 1000]
                        {gt: 500, lte: 900, label: ‘正常‘, color: ‘#9adcfa‘}, // (500, 900]
                        {gt: 310, lte: 500, label: ‘警告‘, color: ‘#ffeb3b‘}, // (310, 500]
                        {gt: 200, lte: 300, label: ‘较差‘, color: ‘#ff9800‘}, // (200, 300]
                        {gt: 10, lte: 200, label: ‘非常差‘, color: ‘orangered‘}, // (10, 200]
                        {value: 0, label: ‘无数据‘, color: ‘#999‘} // [0]
                    ]
                },
                geo: { // 地理坐标系组件用于地图的绘制
                    map: ‘china‘, // 表示中国地图
                    // roam: true, // 是否开启鼠标缩放和平移漫游
                    zoom: 1.2, // 当前视角的缩放比例(地图的放大比例)
                    label: {
                        show: true
                    },
                    itemStyle: { // 地图区域的多边形 图形样式。
                        borderColor: ‘rgba(0, 0, 0, 0.2)‘,
                        emphasis: { // 高亮状态下的多边形和标签样式
                        shadowBlur: 20,
                        shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                        }
                    }
                },
                series: [
                    {
                        name: ‘‘, // 浮动框的标题(上面的formatter自定义了提示框数据,所以这里可不写)
                        type: ‘map‘,
                        geoIndex: 0,
                        label: {
                        show: true
                        },
                        // 这是需要配置地图上的某个地区的数据,根据后台的返回的数据进行拼接(下面是我定义的假数据)
                        data: [{
                        ‘name‘: ‘北京‘,
                        ‘value‘: 599,
                        ‘perf‘: ‘0.501s‘, // 性能
                        ‘downloadSpeep‘: ‘1.221MB/s‘, // 下载速度
                        ‘usability‘: ‘100%‘, // 可用性
                        ‘point‘: ‘250‘ // 监测点
                        }, {
                        ‘name‘: ‘上海‘,
                        ‘value‘: 142
                        }, {
                        ‘name‘: ‘黑龙江‘,
                        ‘value‘: 44
                        }, {
                        ‘name‘: ‘新疆‘,
                        ‘value‘: 999,
                        ‘perf‘: ‘0.501s‘, // 性能
                        ‘downloadSpeep‘: ‘1.221MB/s‘, // 下载速度
                        ‘usability‘: ‘100%‘, // 可用性
                        ‘point‘: ‘250‘ // 监测点
                        }, {
                        ‘name‘: ‘深圳‘,
                        ‘value‘: 92
                        }, {
                        ‘name‘: ‘湖北‘,
                        ‘value‘: 810
                        }, {
                        ‘name‘: ‘四川‘,
                        ‘value‘: 453
                        }]
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示地图数据
            this.chinachart.setOption(chartOption)
            // 对window窗口变化加监听事件
            window.addEventListener(‘resize‘, () => {
                this.chinachart.resize()
            })
        }



技术图片

 

 

以上是关于基于echarts的中国地图的主要内容,如果未能解决你的问题,请参考以下文章

Echarts基于百度地图实现地图飞线

25继续echarts实现中国地图

vue中,基于echarts 地图实现一个人才回流的大数据展示效果

基于Echarts+百度地图+Three.js的数据可视化系统

自定义地图连线效果,基于echart自定义切换连线中心

有没有熟悉echarts的大神,echarts绘制地图的时候,怎么让地图中某个固定区域显示特定的颜色?