Echarts-json显示地图，动态渲染，常见效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图表</title>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div style="width:600px;height:400px;border:1px solid red;"></div>
<script>
//1. ECharts最基本的代码结构
//2. 准备中国地图的矢量数据
//3. 使用Ajax获取矢量地图数据
//4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap(chinaMap, 矢量地图数据)
//5. 配置geo的type为map, map为chinaMap
// 空气质量数据，颜色渲染
var 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 },
{ name: 黑龙江, value: 114 },
{ name: 湖南, value: 175 },
{ name: 安徽, value: 117 },
{ name: 山东, value: 92 },
{ name: 新疆, value: 84 },
{ name: 江苏, value: 67 },
{ name: 浙江, value: 84 },
{ name: 江西, value: 96 },
{ name: 湖北, value: 273 },
{ name: 广西, value: 59 },
{ name: 甘肃, value: 99 },
{ name: 山西, value: 39 },
{ name: 内蒙古, value: 58 },
{ name: 陕西, value: 61 },
{ name: 吉林, value: 51 },
{ name: 福建, value: 29 },
{ name: 贵州, value: 71 },
{ name: 广东, value: 38 },
{ name: 青海, value: 57 },
{ name: 西藏, value: 24 },
{ name: 四川, value: 58 },
{ name: 宁夏, value: 52 },
{ name: 海南, value: 54 },
{ name: 台湾, value: 88 },
{ name: 香港, value: 66 },
{ name: 澳门, value: 77 },
{ name: 南海诸岛, value: 55 }
]
// 散点数据
var scatterData = [
{
value: [117.283042, 31.86119]
}
]
// 配置图表
var MyCharts = echarts.init(document.querySelector("div"))
$.get(json/map/china.json, function (ret) {
console.log(ret);
echarts.registerMap(chinaMap, ret)
var options = {
geo: {
type: map,
map: chinaMap,//chinaMap要与registerMap第一个属性一致
roam: true,//允许缩放和拖动效果
// label:{//省份名称一直显示
// show:true
// },
// zoom:5,//设置初始化的缩放比例，原始为1
// center:[116,39],//设置地图中心点坐标，经纬度
},
series: [
{
data: airData,
geoIndex: 0,//将空气质量的数据和第0个geo配置关联在一起
type: map
},
// 散点图，series可以配置多个图表
{
data: scatterData,//配置散点的坐标数据
type:effectScatter,//配置series下的新对象的type值为effectScatter
coordinateSystem:geo,//指明散点使用的坐标系统，geo的坐标系统
rippleEffect:{
scale:10 //设置涟漪动画的缩放比例
}
}
],
visualMap: {
min: 0,
max: 300,
inRange: {
color: [white, red],//颜色渐变
},
calculable: true//三角，可以筛选数据
},
}
MyCharts.setOption(options)
})
</script>
</body>
</html>
下一篇：
java宠物王国_宠物王国单机版