准备工作:
准备数据:name value 组成的对象数组 - 每个省份的空气指标数据
let airData = [{ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },{ name: '上海', value: 31.22 },{ name: '重庆', value: 66 },{ name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南', value: 25.04 },{ name: '辽宁', value: 50 }......]
散点图的数据-不是直角坐标系 数据是 经纬度
let scatterData = [{value:[114.298572, 30.584355]},{value:[116.405285, 39.904989]}]
获取地图的数据(json)
$.get('../json/map/china.json',function (res) {const res = res}
核心配置:
注册地图:
echarts.registerMap('chinaMap',res) // 注册地图的矢量数据 第一个参数:起名字(字符串) 第二个参数就是上面请求回来的数据源
地图不用 xAxis yAsis 标识geo只需这一项配置 就可以把地图显示出来
geo:{type:'map',map:'chinaMap', // 与上面注册的名字保持一致roam:true, // 可以被拖动和缩放label:{show:true // 展示标签},zoom:1, // 初始化缩放比例center:[113.665412, 34.757975], // 中心点itemStyle:{color:'#f35' // 想设置中心点的颜色},},
在地图的基础上 使用 颜色区分和 散点图
series:[{data:airData, // 最上面定义的数据geoIndex:0, // 将空气质量的指数和第0个 gen 关联在一起type:'map', // 类型是map},{data: scatterData, // 配置散点数据(坐标值)type: 'effectScatter', // 类型是会扩散的散点图coordinateSystem:'geo', // 指明散点使用的坐标系统是georippleEffect:{scale:5, // 设置涟漪动画的缩放color:'#107' // 涟漪的颜色},}],visualMap:{min:0,max:300,inRange:{ // 最大值 最小值 以及 颜色过渡color:['#fff','red']},calculable: true // 出现滑块选择范围}