PS:所用数据纯属虚构
散点图
散点图是指在回归分析中,数据点在直角坐标系平面上的分布图,散点图表示因变量随自变量而变化的大致趋势,据此可以选择合适的函数对数据点进行拟合。
用两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点图将序列显示为一组点。值由点在图表中的位置表示。类别由图表中的不同标记表示。散点图通常用于比较跨类别的聚合数据。
参数含义:
series-scatter. symbolSize = 10
number Array Function
标记的大小,可以设置成诸如 10
这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10]
表示标记宽为20
,高为10
。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/js/echarts.min.js"></script>
<!-- cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body>
<div id="scatter" style="width: 600px; height: 400px;"></div>
<script>
var scatter_chart = echarts.init(document.getElementById("scatter"));
var scatter_option = {
title:{
text:"Echart scatter 入门"
},
xAxis:{},
yAxis:{},
series:[{
symbolSize:20,
data:[
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6, 7.24],
[4.2, 4.62],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.58],
],
type:'scatter'
}]
};
scatter_chart.setOption(scatter_option);
</script>
</body>
</html>
如图所示:
GEO地图
geo是echarts渲染数据的格式,geo是数据基础,有基础数据就很容易实现上图效果了。
visualMap
visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道),地图的渲染依赖于此配置。
参数含义:
boolean string
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale'
或者 'move'
。设置成 true
为都开启
number Array
指定取哪个系列的数据,即哪个系列的 series.data。默认取所有系列。
boolean
是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。
geo. aspectScale = 0.75
number
这个参数用于 scale 地图的长宽比。
最终的 aspect
的计算方式是:geoBoundingRect.width / geoBoundingRect.height * aspectScale
代码如下(数据纯属虚构):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/js/echarts.min.js"></script>
<!-- cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
<script src="/static/js/china.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map_chart = echarts.init(document.getElementById("map"));
var map_option = {
tooltip:{
trigger:'item',
formatter:'数量<br> {b}:{c}'
},
visualMap:{
seriesIndex: 0,
min: 0,
max: 300,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本
calculable:true
},
grid:{
height: 200,
width: 8,
right: 80,
bottom: 10
},
geo:{
map:'china',
aspectScale:0.75, // 长宽比
top: 5,
bottom: 15,
label:{
normal:{
show: true,
},
emphasis:{
show: true,
},
},
// 是否开启鼠标缩放和平移漫游
roam:false,
},
series:[
{
zlevel:1,
name: 'china',
type: 'map',
mapType: 'china',
selectedMode: 'multiple',
roam:true,
left:0,
right:'15%',
geoIndex:0,
aspectScale:0.75, // 长宽比
label:{
normal:{
show:true,
},
emphasis:{
show:true,
}
},
data:[
{name: '北京',value:100},
{name: '广东',value:200},
{name: '上海',value:300},
{name: '湖北',value:105},
{name: '黑龙江',value:90},
{name: '新疆',value:10},
{name: '天津',value:20},
{name: '重庆',value:30},
{name: '河北',value:40},
{name: '河南',value:50},
{name: '云南',value:60},
{name: '辽宁',value:70},
{name: '湖南',value:300},
{name: '安徽',value:210},
{name: '山东',value:220},
{name: '江苏',value:232},
{name: '浙江',value:250},
{name: '江西',value:134},
{name: '广西',value:156},
{name: '甘肃',value:89},
{name: '山西',value:113},
{name: '内蒙古',value:234},
{name: '陕西',value:234},
{name: '吉林',value:109},
{name: '福建',value:78},
{name: '贵州',value:58},
{name: '青海',value:35},
{name: '西藏',value:89},
{name: '四川',value:189},
{name: '宁夏',value:68},
{name: '海南',value:256},
{name: '台湾',value:25},
{name: '香港',value:29},
{name: '澳门',value:280}
]
}
]
};
map_chart.setOption(map_option);
</script>
</body>
</html>
如图所示:
雷达图
雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。 雷达图也称为网络图,蜘蛛图,星图,蜘蛛网图,不规则多边形,极坐标图或Kiviat图。它相当于平行坐标图,轴径向排列。
参数含义:
Array
雷达图的指示器,用来指定雷达图中的多个变量(维度)。
包括以下变量:
string
指示器名称。
number
指示器的最大值,可选,建议设置
number
指示器的最小值,可选,默认为 0。
string
标签特定的颜色。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/js/echarts.min.js"></script>
<!-- cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
<script src="/static/js/china.js"></script>
</head>
<body>
<div id="radar" style="width: 600px; height: 400px;"></div>
<script>
var radar_chart = echarts.init(document.getElementById("radar"));
var radar_option = {
title:{
text:"基础雷达图"
},
tooltip:{},
legend:{
data:['预算分配', '实际开销']
},
radar:{
shape:'circle', // 形状 polyfon:六边形
name:{
textStyle:{
color:'#fff',
backgroundColor:'#999',
borderRadius: 3,
padding: [3, 5]
}
},
// 最大值,根据实际数值进行设置
indicator:[
{name:'销售', max: 6500},
{name:'管理', max: 16000},
{name:'信息技术', max: 30000},
{name:'客服', max: 38000},
{name:'研发', max: 52000},
{name:'市场', max: 25000},
]
},
series:[
{
name:'预算 VS 开销',
type: 'radar',
data:[
{
'value':[4300, 10000, 28000, 35000, 50000, 19000],
'name': '预算分配'
},
{
'value':[5000, 14000, 28000, 31000, 42000, 21000],
'name': '实际开销'
},
]
}
]
};
radar_chart.setOption(radar_option);
</script>
</body>
</html>
如图所示: