2021-07-12 Echarts基础配置-地图，雷达图，仪表盘

1，地图-从宏观角度快速看出不懂地理位置上的数据差异

地图图标的使用方式

1. 百度地图API:需要申请百度地图ak
2. 矢量地图：需要准备矢量地图数据

实现步骤：

• 最基本的代码结构：引入ja文件/npm DOM容器 初始化对象 设置option
• 准备中国的矢量地图json文件，放到项目目录下
• 使用ajax/axious等获取 如Ajax $.get(“文件路径”，function(名字随便起，如chinaJson){})
• 在回调函数中往echarts全局对象注册地图的json数据
  echarts.registerMap(‘同理，chinaMap，但与下述geo引用也要保持一致’，与上述对应chinaJson)
• 在geo属性下配置 type:'map’ ， map:'chinaMap‘（与注册地图一致）

<script src="jquery.min.js"></script>
<script>
	var mCharts = echarts.init(document.querySelector("div"))---洞元素
	$.get('chian.json',function(ret){
		echarts.registerMap('chinaMap',ret)
	})
	var option = {
		geo:{
			type:'map’，
			map: 'chinaMap'  //同注册map名一致，.registerMap第一个元素一致
		}
	}
	mCharts.setOption(option)
</script>

常用配置：

• 缩放拖动：roam
• 名称显示 label
• 初始化缩放比例：zoom
• 设置地图中心点坐标：center

	var option = {
		geo:{
			type:'map’，
			map: 'chinaMap'  //同注册map名一致，.registerMap第一个元素一致

			roam: true, //设置允许缩放以及拖动的效果
			label:{
				show: true, //展示标签
			},
			zoom：2 //缩放初始化比例为2倍，为1时，比例为100%
			center:[87.617733, 43.792818 ]  //设置地图中心点坐标，容器中心点
		}
	}

常用配置：

• 显示某个区域：
  1，加载该区域的矢量地图数据
  2，通过registerMap注册到echarts全局对象中
  3，指明geo配置下的type和map属性
  4，通过zoom放大该区域
  5，通过center定位中心点

	var mCharts = echarts.init(document.querySelector("div"))---洞元素
	$.get('anhui.json',function(ret){  ---安徽省
		echarts.registerMap('anhui',ret)
	})
	var option = {
		geo:{
			type:'map’，
			map: 'anhui'  //同注册map名一致，.registerMap第一个元素一致
		},
		zoom：1.2  //初始化
		center:[116.507676,31.752889]  //这个坐标值，我们是可以通过地图矢量数据获取到的
	}
	mCharts.setOption(option)

安徽省json数据


常用效果

• 不同城市颜色不同
  1，显示基本的中国地图
  2 城市的空气质量数据设置给series
  3, 将series下的数据和geo关联起来
  4，结合visualMap配合使用

var airData = [{name:'北京'，value:39.92},{name:'天津'，value:39.12} .... {name:'湖北'，value:273}]
var option = {
		geo:{
			type:'map’，
			map: 'chinaMap'  //同注册map名一致，.registerMap第一个元素一致

			roam: true, //设置允许缩放以及拖动的效果
			label:{
				show: true, //展示标签
			},
			zoom：2 //缩放初始化比例为2倍，为1时，比例为100%
			center:[87.617733, 43.792818 ]  //设置地图中心点坐标，容器中心点
		},
		series：[
			{
				data:airData,
				geoIndex：0，//将空气质量数据和第0个geo配置关联在一起
				type:'map'
			}
		],
		visualMap: [
			min:0,
			max:300,  //颜色效果的最大值
			inRange:{
				color:[’white','red']   //控制颜色渐变的效果
			}，
			calculable: true  //下方的两个小三角，进行筛选颜色
		}
}

常见效果：

• 地图和散点图结合
  1，给series下增加新的对象
  2，准备好散点数据，设置给新对象的data
  3, 配置新对象的type
  type:effectScatter 涟漪散点图
  4,让散点图使用地图坐标系统
  coordinateSystem:‘geo’
  5,让涟漪的效果更佳明显
  rippleEffect:{
  scale:10
  }

   var scatterData = [ { value: [117.283042, 31.86119] } ]
	var option = {
		geo:{
			type:'map’，
			map: 'chinaMap'  //同注册map名一致，.registerMap第一个元素一致
			roam: true, //设置允许缩放以及拖动的效果
			label:{
				show: true, //展示标签
			},
			zoom：2 //缩放初始化比例为2倍，为1时，比例为100%
			center:[87.617733, 43.792818 ]  //设置地图中心点坐标，容器中心点
		},
		series：[
			{
				data:airData,
				geoIndex：0，//将空气质量数据和第0个geo配置关联在一起
				type:'map'
			}
			/*添加新的对象*/
				{
				data:scatterData ,
				type:'effectScatter ',
				coordinateSystem:'geo'  //指明散点使用的坐标系统  geo的坐标系统
				rippleEffect:{
						scale:10  //涟漪效果更显著，设置涟漪动画的缩放比例
				}
			}
		],
		visualMap: [
			min:0,
			max:300,  //颜色效果的最大值
			inRange:{
				color:[’white','red']   //控制颜色渐变的效果
			}，
			calculable: true  //下方的两个小三角，进行筛选颜色
		}
}

2，雷达图-用来分析多个维度的数据与标准数据的对比情况

实现步骤：

• 最基本的代码结构：引入ja文件/npm DOM容器 初始化对象 设置option
• 定义各个维度的最大值 indicator:[{name:'易用性‘，max：100}，…]
• 使准备具体产品的数据data:[{name:'华为手机1’，value:[80,90,80,82,90]},…]
• 图标类型：在series下设置type:radar

	//各个维度的最大值
	var dataMax = [{name:'易用性‘，max：100},{name:'功能‘，max：100},{name:'拍照‘，max：100},{name:'跑分‘，max：100},{name:'续航‘，max：100}]
	var option = {
		radar：{
			indicator: dataMax   //指定各维度的最大值
		},
		series:[
			{
				type:'radar'，//radar 此图表时一个雷达图
				data:[
					{
						name:'华为手机1'，
						value:[80,90,80,82,90]
					},
					{
						name:‘中兴手机1’,
						value:[70,82,75,70,78]
					},
				]
			}
		]
	}

常用配置：

• 显示数值：label
• 区域面积：areaStyle
• 绘制图形：shape

	var option = {
		radar：{
			indicator: dataMax   //指定各维度的最大值
			shape:'circle'  //配置雷达图最外层的图形   circle   polygon(多边形)
		},
		series:[
			{
				type:'radar'，//radar 此图表时一个雷达图
				label:{
					show:true  //显示数值
				}，
				areaStyle:{}, //将每一个产品的雷达图形成阴影的面积
				data:[
					{
						name:'华为手机1'，
						value:[80,90,80,82,90]
					},
					{
						name:‘中兴手机1’,
						value:[70,82,75,70,78]
					},
				]
			}
		]
	}

3，仪表盘-主要用在进度把控以及数据范围的监测,直观的表现出某个指标的进度或实际情况

实现步骤：

• 最基本的代码结构：引入ja文件/npm DOM容器 初始化对象 设置option
• 准备数据，设置给series下的data data:[{value:97}]
• 图表类型：在series下设置type:gauge

var option = {
	series:[
		{
			type:'gauge',
			data:[
				{
					value:97，
					itemStyle:{  //配置指针的样式
						color:'pink'
					}
				}，//每一个对象就代表一个指针
				{
					value:85，
					itemStyle:{  //配置指针的样式
						color:'green'
					}
				}
			],
			min:50, //min max控制仪表盘数值范围
		}
	]
}

常见的配置：

• 数值范围： max min
• 多个指针：增加data中的数组元素
• 多个指针颜色差异 itemStyle
  

4，总结

• bar
• line
• scatter/effectScatter
• pie 饼图
• map 地图
• radar 雷达图
• gauge 仪表盘