使用eCharts实现中国地图的散点图

前提条件需引入china.js文件

具体代码：

function getMapChart() {
    // 初始化echarts实例
     var myEcharts = echarts.init(document.getElementById("map-chart"));
     var option = {
         geo: {
             map: 'china',
             label: {
                 normal: {
                     show: false, //显示省份标签
                 },
                 emphasis: { //对应的鼠标悬浮效果
                     show: false,
                     textStyle: {
                         color: "#fff"
                     }
                 }
             },
             roam: false,//是否开启鼠标缩放和平移漫游
             itemStyle: {//地图区域的多边形 图形样式
                 normal: {//是图形在默认状态下的样式
                     borderWidth: .5, //区域边框宽度
                     borderColor: '#fff', //区域边框颜色
                     areaColor: "#3EABFF", //区域颜色
                 },
                 emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                     borderWidth: .5,
                     borderColor: '#fff',
                     areaColor: "#0078FF",
                     label: { show: true }
                 }
             },
             aspectScale: 0.75,
             zoom: 1.2,//地图缩放比例,默认为1
         },
         title: {  //标题样式
             text: '',
             x: "center",
             textStyle: {
                 fontSize: 18,
                 color: "#fff"
             },
         },
         tooltip: {  //这里设置提示框
             show: false,
             trigger: 'item',  //数据项图形触发
             backgroundColor: "#fff",  //提示框浮层的背景颜色。
         },
         visualMap: {//视觉映射组件
             show: false,
             top: 'center',
             left: 'left',
             min: 10,
             max: 500000,
             text: ['High', 'Low'],
             realtime: false,  //拖拽时，是否实时更新
             calculable: true,  //是否显示拖拽用的手柄
             inRange: {
                 color: ['lightskyblue', 'yellow', 'orangered']
             }
         },
         series: [
             {
                 name: '',
                 type: 'effectScatter', // series图表类型
                 coordinateSystem: 'geo', // series坐标系类型
                 symbolSize: function (val) {//设置散点大小
                     return val[2] / (val[2] / 12)
                 },
                 data: [{
                     name: '北京',    // 数据项名称，在这里指地区名称
                     value: [        // 数据项值
                         116.46,     // 地理坐标，经度
                         39.92,      // 地理坐标，纬度
                         340         // 北京地区的数值
                     ],
                     tooltip: {
                         show: true,
                         trigger: 'item',  //数据项图形触发
                         backgroundColor: "#fff",  //提示框浮层的背景颜色。
                         borderColor: 'rgba(0,0,0,0)',
                         formatter: function (params) {
                             //return 'Top1<br><br>{b}：' + params,
                         },

                     },
                     itemStyle: {
                         normal: {
                             color: '#0041D2',
                         }
                     },
                     label: {
                         normal: {
                             show: true, //显示省份标签
                             position: 'right',
                             textStyle: {
                                 color: "#0041D2",//标签字体颜色
                             },
                             formatter: '{b}'
                         },
                     },
                     rippleEffect: {//涟漪特效相关配置
                         brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
                     },
                 }, { name: '海门', value: [121.15, 31.89, 90] },
                 { name: '鄂尔多斯', value: [109.781327, 39.608266, 120] },
                 { name: '招远', value: [120.38, 37.35, 142] },
                 ]
             }
         ]
     };
     // 使用刚指定的配置项和数据显示图表。
     myEcharts.setOption(option);
 }

展示效果：