文接上篇 ECharts 入门知识 ECharts 入门真的很简单，本文继续介绍 ECharts 常用图表相关内容。

一、散点图

散点图多用于推断不同维度数据之间的相关性，如下图判断身高体重相关性散点图：

> 实现步骤

① 实现 ECharts 基本代码结构。引入 js 文件，DOM 容器，初始化，设置 option 。

② x 轴数据和 y 轴数据组成的二维数组。

③ 设置图表类型。在 series 下设置 type: scatter ，xAxis 和 yAxis 都设置 type: value

④ 一般 xAxis 和 yAxis 还需调整为脱离 0 值比例：scale: true

> 基本代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script>
</head><body><div style="width: 600px;height:400px"></div><script>// 基本数据var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }]var axisData = []for (var i = 0; i < data.length; i++) {var height = data[i].heightvar weight = data[i].weightvar newArr = [height, weight]axisData.push(newArr)}var mCharts = echarts.init(document.querySelector("div"))// 配置项var option = {xAxis: {type: 'value',scale: true       // 脱离 0 值比例},yAxis: {type: 'value',scale: true},series: [{type: 'scatter', // 指明图表的类型为散点图data: axisData}]}mCharts.setOption(option)</script>
</body></html>

> 常见效果

气泡图效果

散点的大小：symbolSize ，可以是值或回调

散点的颜色：itemStyle.color ，可以是值或回调
涟漪动画效果

设置带涟漪动画的散点图： type = 'effectScatter'

涟漪相关特效设置：rippleEffect

设置何时显示涟漪效果：showEffectOn = 'render'、showEffectOn = 'emphasis'

二、直角坐标系常用配置

此前已经学习了三种直角坐标系图表：柱状图、折线图、散点图。但还未提及如何对直角坐标系进行配置，如坐标轴、网格显示等等。下面进行介绍。

> 网格 grid

grid 是用来控制直角坐标系的布局和大小的，x 轴和 y 轴就是在 grid 的基础上进行绘制的。

显示网格

show: true
网格边框

borderWidth、borderColor
网格位置和大小

位置： left、top、right、bottom

大小：width、height

> 坐标轴 axis

坐标轴类型 type
显示位置 position

xAxis 可取值为 top、bottom

yAxis 可取值为 left、right

> 区域缩放 dataZoom

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

类型 type

slider：滑块

inside：内置，依靠鼠标滚轮或双指缩放
指明产生作用的轴

xAxisIndex：设置缩放组件控制的是哪个 x 轴，一般为 0

yAxisIndex：设置缩放组件控制的是哪个 y 轴，一般为 0
指明初始状态的缩放情况

start：数据窗口范围的起始百分比

end：数据窗口范围的结束百分比

三、饼图

饼图可以帮助用户快速了解不同分类的数据占比情况。如下图某大学生在各平台消费情况：

> 基本代码

<!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>Document</title><script src="lib/echarts.min.js"></script>
</head><body><div style="width: 600px; height: 400px"></div><script>var mCharts = echarts.init(document.querySelector('div'))var pieData = [{name: '某宝',value: 12231},{name: '啊东',value: 23636},{name: '拼夕夕',value: 16364},{name: '舔狗house',value: 7231}]var option = {series: [{type: 'pie',data: pieData}]}mCharts.setOption(option)</script>
</body></html>

> 常见效果

显示数值

label.formatter
圆环

设置两个半径 radius ，如 radius: ['50%', '75%']
南丁格尔图

饼图各个区域半径随数值变化。roseType: 'radius' 。
选中效果

选中模式 selectedMode: 'single'、 selectedMode: 'multiple'
选中偏移量 selectedOffset

var option = {series: [{type: 'pie',data: pieData,label: {show: true,                 // 显示文字formatter: (arg) => {        // 格式化文字内容return `${arg.name}：${arg.value} 元 \n\n${arg.percent}%`}},// radius: 100,               // 饼图半径// radius: ['50%', '75%']     // 圆环roseType: 'radius',           // 南丁格尔图selectedMode: 'single',       // 选中效果 (single,multiple)selectedOffset: 30,}]
}

四、地图

> 地图图表的使用方式

百度地图 API

需要申请百度地图 ak
矢量地图

需要准备矢量地图数据

这里采用第二种方式，也就是提前准备好了矢量地图数据的 json 文件

> 实现步骤

① ECharts 基本代码。

② 准备中国的矢量地图 json 文件，放到 json/map/ 目录下。

③ 使用 Ajax 获取 china.json 。

④ 在回调函数中向 echarts 全局对象注册地图的 json 数据。

⑤ 在配置项 option 中配置 geo 。

> 基本代码

<!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>Document</title><script src="lib/echarts.min.js"></script><script src="lib/jquery.min.js"></script>
</head><body><div style="width: 700px; height: 400px"></div><script>var mCharts = echarts.init(document.querySelector('div'))$.get('json/map/china.json', (ret) => {echarts.registerMap('chinaMap', ret)var option = {geo: {type: 'map',map: 'chinaMap'}}mCharts.setOption(option)})</script>
</body></html>

这里是采用 jq 实现的，当然你也可以使用 axios 。此外，需要注意要将 option 配置项设置放在获取 json 数据后。

> 常用配置

详细 geo 配置可参考官方文档 >> https://echarts.apache.org/zh/option.html#geo

配置	描述
`roam`	拖动和缩放
`label`	名称显示
`zoom`	初始缩放比例
`center`	地图中心点

var option = {geo: {type: 'map',map: 'chinaMap',roam: true,                      // 设置可拖动可缩放label: {show: true                     // 显示名称},zoom: 1,                         // 设置初始化缩放比例center: [87.617733, 43.792818]   // 设置中心点坐标}
}

> 常见效果

不同城市颜色不同

① 设置 series 数据，并将 series 数据与 geo 关联起来。

geoIndex: 0、type: 'map'

② 结合 visualMap 配合使用。

min、max、inRange、calculabe
地图和散点图结合

① series 增加新对象

② 准备散点数据，设置新对象的 data

③ 配置新对象的 type

type: effectScatter

④ 让散点图使用地图坐标系统

coordinateSystem: 'geo'

var option = {geo: {type: 'map',map: 'chinaMap',roam: true,                     // 设置可拖动可缩放label: {show: true                    // 显示名称},zoom: 1,                        // 设置初始化缩放比例},series: [{data: airData,                // 空气质量指数数据geoIndex: 0,type: 'map'},{data: scatterData,            // 配置散点坐标数据type: 'effectScatter',coordinateSystem: 'geo',      // 指明散点使用的坐标系统rippleEffect: {scale: 10                   // 设置涟漪动画缩放比例}}],visualMap: {min: 0,max: 300,                      // 根据颜色依赖数据给定最大值、最小值inRange: {color: ['white', 'orange', 'red']   // 控制颜色渐变范围},calculable: true,              // 滑块  用于数据筛选}
}

五、雷达图

雷达图可以用来分析多个维度数据与标准数据的对比情况。如下图手机性能对比的雷达图：

> 实现步骤

① ECharts 基本结构。

② 定义各个维度最大值 indicator 。

③ 准备具体产品数据。

④ 指明图表类型 radar 。

> 基本代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script>
</head><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},series: [{type: 'radar',data: [{name: 'HUAWEI P100',value: [80, 95, 85, 82, 90]},{name: 'iPhone 100',value: [90, 85, 92, 78, 83]}]}]}mCharts.setOption(option)</script>
</body></html>

> 常用配置

radar 详细配置参见官方文档 >> https://echarts.apache.org/zh/option.html#radar

配置	描述
`label`	显示数值
`areaStyle`	阴影面积
`shape`	绘制类型

六、仪表盘

仪表盘主要用于进度把控以及数据范围的检测，可以直观的表现某个指标的进度。

> 实现步骤

① ECharts 基本结构。

② 准备数据，设置给 series 下 data 。

③ 设置图表类型 type: gauge 。

> 基本代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script>
</head><body><div style="width: 600px;height:400px"></div><script>var mCharts = echarts.init(document.querySelector("div"))var option = {series: [{type: 'gauge',data: [{value: 66}]}]}mCharts.setOption(option)</script>
</body></html>

> 实现效果

数值范围

max、min
多指针

增加 data 中数据
指针样式

itemStyle

var option = {series: [{type: 'gauge',data: [{value: 66,itemStyle: {          // 指针的样式color: 'tomato'       // 指针的颜色}},                      // 每一个对象就代表一个指针{value: 85,itemStyle: {color: 'skyblue'}}],max: 180,min: 50                   // min max 控制仪表盘数值范围}]
}

七、图表总结

ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」相关推荐

数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Apache Echarts常用图表之折线图
文章目录 Echarts常用图表折线图 1. 折线图的实现步骤 2. 折线图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 标注区间 `markArea` 数值显示 ...
ECharts常用图表饼图
1.图表4 饼图 1.1.饼图的实现步骤步骤1 ECharts 最基本的代码结构此时 option 是一个空空如也的对象步骤2 准备数据步骤3 准备配置项在 series 下设置 type: ...
echarts 常用图表示例
既然说到 echarts,那就不得不分享一个了不得的链接啦:Documentation - Apache ECharts (绝对不会让你感到失望的哟). 条形图 <!DOCTYPE html&g ...
常用echart图表(柱状图、折线图、饼图、环形进度条、雷达图等等)基础配置和用法、resize()响应、轮播tooltip
一.最简单的使用方式引入官方echart.js即可 <script src="js/echarts.js"></script> 二.页面准备一个DOM容器 ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...
Vue +Element UI (饿了么UI) +Echarts 实现图表自适应配置
接到一个需求,让用户能够通过配置, 配置出自己想要的统计图, 填入数据分析需求: 需要客户配置的数据项有哪些? 客户配置数据的存储 JSON转String 存数据库就行..... 一.可配置的项主 ...
echarts属性，常用图表详解
目录 a.折线图 b.柱状图 c.堆叠柱状图 d.饼图 e.南丁格尔玫瑰图 f.基础雷达图 g.数据聚合图 h.气泡图 i.k线图 j.基础盒须图 k.漏斗图 l.仪表图基础属性 // 标题配置ti ...

ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」

一、散点图

二、直角坐标系常用配置

三、饼图

四、地图

五、雷达图

六、仪表盘

七、图表总结

ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」相关推荐

最新文章

热门文章