900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > echarts-地图使用/配合散点图展示空气质量

echarts-地图使用/配合散点图展示空气质量

时间:2023-11-04 21:41:00

相关推荐

echarts-地图使用/配合散点图展示空气质量

准备工作:

准备数据: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 // 出现滑块选择范围}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。