持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
由于文章太长，本文分为两篇介绍，前三个图表：数据可视化ECharts的七大常用图表，看完就会用(1)
本文主要介绍后四个图表。
ECharts七大常用图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图
四、饼图
饼图的数据是由name和value组成的字典所形成的数组；饼图无须配置xAxis和yAxis。 特点：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况。
var pieData = [
{
name: '淘宝',
value: 11231
},
{
name: '京东',
value: 22673
},
{
name: '唯品会',
value: 6123
},
{
name: '1号店',
value: 8989
},
{
name: '聚美优品',
value: 6700
}
]
var option = {
series: [
{
type: 'pie',
data: pieData
}
]
}
常见效果：
显示数值： label.show: 显示文字 label.formatter: 格式化文字 选中效果 ： selectedMode: 'multiple'选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选 selectedOffset: 30选中扇区的偏移距离 圆环：radius饼图的半径。可以为如下类型：number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。Array.：数组的第一项是内半径，第二项是外半径, 通过Array, 可以将饼图设置为圆环图 南丁格尔图：指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大：roseType:'radius'
var option = {
series: [
{
type: 'pie',
data: pieData,
label: { // 饼图文字的显示
show: true, // 显示文字
//formatter: 'hehe' // 决定文字显示的内容
formatter: function(arg){
// console.log(arg)
return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
}
},
// radius: 20 // 饼图的半径
// radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
// selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30
}
]
}
五、地图
特点:地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异。 地图图表的使用方式：
- 百度地图API: 使用百度地图的api, 它能够在线联网展示地图, 百度地图需要申请ak
- 矢量地图: 可以离线展示地图, 需要开发者准备矢量地图数据接下来的实现是通过矢量图的方式来实现的
步骤：
- ECharts最基本的代码结构
- 准备中国地图的矢量数据
- 使用Ajax获取矢量地图数据
- 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
- 配置geo的type为'map', map为'chinaMap'
需要注意的是, 由于在代码中使用了Ajax, 所以此文件的打开, 不能以file的协议打开, 应该将其置于HTTP的服务之下方可正常展示地图。可使用vscode的live server插件。
<div style="width: 600px;height:400px;border: 1px solid #f00"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (ret) {
// ret 就是中国的各个省份的矢量地图数据
// console.log(ret)
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
},
zoom: 1, // 设置初始化的缩放比例
center: [87.617733, 43.792818] // 设置地图中心点的坐标，这个坐标值, 我们是可以通过地图矢量数据获取到的
}
}
mCharts.setOption(option)
})
</script>
下面实现不同城市颜色不同的效果：（地图违规，放不出来，大家自行脑补）
<script>
var airData = [
{ name: '北京', value: 39.92 },
{ name: '四川', value: 58 }
//数据太长，省略了
]
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (ret) {
// ret 就是中国的各个省份的矢量地图数据
console.log(ret)
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
}
},
series: [
{
data: airData,
geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
type: 'map'
}
],
visualMap: {//visualMap是视觉映射组件, 和之前区域缩放dataZoom很类似, 可以做数据的过滤. 只不过dataZoom主要使用在直角坐标系的图表, 而visualMap主要使用在地图或者饼图中
min: 0,
max: 300,
inRange: {
color: ['white', 'red'] // 控制颜色渐变的范围
},
calculable: true // 出现滑块
}
}
mCharts.setOption(option)
})
</script>
六、雷达图
特点：雷达图可以用来分析多个维度的数据与标准数据的对比情况。 使用步骤：
- ECharts最基本的代码结构
- 定义各个维度的最大值, 通过radar属性配置
- 准备产品数据, 设置给series下的data
- 将type的值设置为radar
常见效果：
- 显示数值label
- 区域面积areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
- 绘制类型shape：配置雷达图最外层的图形，可选值为 circle圆形， polygon多边形
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
// 各个维度的最大值
var dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
}
]
var option = {
radar: {
indicator: dataMax, // 配置各个维度的最大值
shape: 'polygon' // 配置雷达图最外层的图形 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]
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
七、仪表盘
特点： 仪表盘可以更直观的表现出某个指标的进度或实际情况 步骤：
- ECharts最基本的代码结构
- 准备数据, 设置给series下的data
- 将type的值设置为gauge
常见效果：
数值范围: max，min
多个指针: 增加data中数组的元素
多个指针颜色的差异: itemStyle
var option = {
series: [
{
type: 'gauge',
data: [
{
value: 97,
itemStyle: { // 指针的样式
color: 'pink' // 指针的颜色
}
}, // 每一个对象就代表一个指针
{
value: 85,
itemStyle: {
color: 'green'
}
}
],
min: 50 // min max 控制仪表盘数值范围
}
]
}
ECharts常用图表总结
使用场景：
