数据可视化——ECharts基础
文章目录
-
- 数据可视化前言
-
- 数据可视化
- 数据可视化的好处
- 数据可视化的方式
- ECharts的基本使用
-
- 什么是ECharts
- ECharts快速上手（使用VSCode）
- ECharts相关配置
- ECharts常用图表
-
- 柱状图：`bar`
-
- 柱状图的基本实现
- 柱状图的常见效果
-
- 最大值\最小值：`markPoint`
- 平均值：`markLine`
- 数值显示：`label`
- 柱宽度：`barWidth`
- 横向柱状图
- 通用配置
-
-
- 标题：title
- 提示框：`tooltip`
- 工具栏：`toolbox`
- 图例：`legend`
-
- 折线图line
-
- 折线图的基本实现
- 折线图的常见效果
-
- `markPoint`与`markLine`
- `markArea`
- 平滑线条：`smooth`/线条样式：`lineStyle`.
- 填充风格：`areaStyle`
- 紧挨边缘：`boundaryGap`
- 缩放, 脱离0值比例：`scale`
- 堆叠图：stack
- 散点图：scatter
-
- 散点图的基本实现
- 散点图的常见效果
-
- 气泡图效果
- 直角坐标系的常见配置
- 饼图
-
- 饼图的常见效果
- 地图
-
- 如何使用HTTP服务打开文件
- 地图图表的使用方式
- 矢量地图的实现步骤
- 地图的常见配置
- 地图的常见效果
- 雷达图
-
- 雷达图的常见效果
- 雷达图的特点
- 仪表盘图
-
- 仪表盘图实现步骤
- 仪表盘的常见效果
- 仪表盘的特点
- 常用图表配置项小结（忘了就看）
-
- 柱状图 bar
- 折线图 line
- 散点图 scatter
- 饼图 pie
- 地图 map
- 雷达图 radar
- 仪表盘 gauge
- 直角坐标系的配置
- 通用配置
官网配置项入口
ECharts社区
数据可视化前言
数据可视化
数据可视化主要是借助于图形化手段，清晰有效地传达与沟通信息。说白了，就是把数据以更加直观的方式进行呈现. 那什么方式是更加直观的方式呢? 就是图表.
以服装店的销售产品数量举例：
直接观察，我们很难有清晰的对比，因此我们通过数据可视化可得到：
数据可视化以后，通过图表更加直观的看出上下半年产品的销售数量，数据之间的关系一目了然。
数据可视化的好处
1、清晰有效地传达与沟通信息
数据可视化的好处之一就是能够清晰有效的传达信息和沟通信息. 继续看刚才的那个例子, 如果使用同样的数据, 换成另外一种展现形式, 比如下边的这幅饼图. 我们可以很容易的就看每个产品的销量占比.不需要太多的脑计算和思维转换.
2、更容易洞察隐藏在数据中的信息
将数据以图表的方式呈现出来还可以帮助我们感受到那些隐藏在数据之间的信息.比如张三去年的成绩单.
我们很容易就可以看出张三去年每科成绩的上下变化.
数据可视化的方式
1、报表类
报表类的主要实现方式就大家熟悉的Excel或者水晶报表, 这种方式主要面向的是非技术人员, 在特定的软件中点击几个按钮,添加一些数据就可以生成图标了.这种方式的优点是简单, 谁都会用. 缺点也显而易见, 就是不灵活, 图表一旦生成之后就固定不变了, 如果数据发生变化了, 图表需要重新生成.
2、商业智能 BI
商业智能BI的实现方式主要有微软的BI和Power-BI, 它比报表类更加高端, 他除了可以对数据生成报表之外, 还可以提出决策依据，帮助企业做出明智的业务经营决策.
3、编码类
编码类, 这种是需要程序员参与, 程序员可以对接到公司现有的系统架构中进行编码, 实时生成动态的图表.常见的使用库有ECharts.js和D3.js, ECharts.js是百度公司开发的一套开源可视化库, D3.js是国外的一个可视化库, 在封装性\易用性\效果上, ECharts要更优秀一些.
ECharts的基本使用
什么是ECharts
ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表.
1：开源免费
它是开源免费的，也就是我们可以免费的使用 ECharts ，不需要缴纳任何的费用
2：功能丰富
它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制, 满足各种需求，比如折线图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用只有你想不到, 没有它做不到的,这句话来形容
3：社区活跃
ECharts 的社区非常活跃，意味着你可以和很多开发者讨论，遇到了 ECharts 中不会的问题，也很容易找到解决办法
4：多种数据的支持
可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其实是数据。 ECharts 对数据格式的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数据格式，还能支持二维表，或者 TypedArray 格式的数据
5：流数据的支持
对于超大的数据量而言， 数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的动态渲染，加载多少数据就渲染多少数据，省去了漫长的数据加载的等待时间, 他还提供了增量渲染的技术, 只渲染变化的数据, 提高系统的资源利用.
6：移动端的优化
7：跨平台
8：酷炫的特效,
9：数据的三维可视化
ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便,功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：ECharts官网
ECharts快速上手（使用VSCode）
ECharts最基本代码结构：引入js文件，DOM容器，初始化对象，设置option.
- 步骤1：引入js文件（ECharts是一个js库所以需要引入库文件）
- 步骤2：准备一个呈现图表的盒子（通常使用div，决定图表所在的位置）
<div id="div1" style="width: 800px;height: 400px;">div>
- 步骤3：初始化echarts实例对象（需要指明图表最终显示在哪里的DOM元素）
var mcharts = echarts.init(document.getElementById("div1"))
- 步骤4：准备配置项
var option = {
xAxis: {
type: 'category',
data: ['小王','小张','小李']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文成绩',
type: 'bar',
data: [90,70,80],
}
],
barWidth: "30%"
}
- 步骤5：将配置项设置给echarts的实例对象
mcharts.setOption(option)
效果展示：
通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码,都是固定不变的.
ECharts相关配置
- xAxis
直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴数据. - yAxis
直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制. - series
系列列表,每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据.
配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可. 网址:官方文档，常用的配置项多用几次, 你自然而然就记下了。
title中的各种配置
title: {
text: "我是标题内容",//设置标题内容
textStyle: {
color: '#88088c',//设置标题的颜色
fontSize: 28//设置标题内容的字号
},
left: 'center' //设置title距离容器左边缘的距离
//‘left为左对齐’ ‘center为居中对齐’ ‘right为右对齐’
}
ECharts常用图表
柱状图：bar
柱状图的基本实现
需求:将数据张三:88,李四:92,王五:63,闰土:77,小明:94,茅台:80,二妞:72，大强:86.可视化。(语文成绩)
- 步骤一: echarts基本代码结构
<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>Documenttitle>
<script src="lib/echarts.min.js">script>
head>
<body>
<div id='div1' style='width: 800px; height 600px'>div>
<script>
var mcharts = echarts.init(document.getElementById("div1"))
var option = {}
mcharts.setOption(option)
script>
body>
html>
- 步骤二: 准备x轴数据
var xdata = ["张三","李四","王五","闰土","小明","茅台","二妞","大强"]
- 步骤三: 准备y轴数据
var ydata = [88,92,63,77,94,80,72,86]
- 步骤四: 准备 option , 将 series 中的 type 的值设置为bar.
var option = {
xAxis: {
type: 'category',
data: xdata
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩'
}
]
}
TIPS: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制.
实现效果如下：
柱状图的常见效果
最大值\最小值：markPoint
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩',
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
}
}
]
平均值：markLine
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩',
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
}
]
数值显示：label
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩',
label: {
show: true,//设置数值是否显示 默认不显示
rotate: 10,//设置数值旋转角度
position: 'top'//设置数值所在位置
}
},
]
柱宽度：barWidth
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩',
barWidth: '30%'
},
]
横向柱状图
只需要将x和y轴调换即可.
var option = {
yAxis: {
type: 'category',
data: xdata
},
xAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩',
barWidth: '30%'
},
],
}
通用配置
使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.
标题：title
title: {
text: '成绩表',//设置标题内容
textStyle: {//设置标题风格
color: '#185572',
fontSize: 25
},
borderWidth: 5,//设置标题边框的宽度单位为像素
borderColor: 'green',//设置标题边框颜色
borderRadius: 10,//设置标题边框圆角
left: 'center',//设置标题对齐方式
},
提示框：tooltip
tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框.
tooltip: {
trigger: 'item',//触发类型,item为数据项图形触发,axis为坐标轴触发.
triggerOn: 'mousemove',//触发时机,mousemove为鼠标移动时触发,click为鼠标点击时触发
//方法一↓//设置提示框的内容,也可不设置,使用默认内容
//formatter: '{b}的分数是{c}'
//方法二↓
formatter: function(arg){
return arg.name + '的分数是' + arg.data
}
},
工具栏：toolbox
toolbox 是 ECharts 提供的工具栏, 内置有：导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具.
工具栏的按钮是配置在 feature 的节点之下的.
toolbox: {
feature: {
saveAsImage: {},//保存为图片
dataView: {},//数据视图
restore: {},//重置
dataZoom: {},//数据缩放
magicType: {//动态类型
type: ['bar','line']
}
}
},
图例：legend
legend 是图例,用于筛选类别,需要和 series 配合使用.
- legend 中的 data 是一个数组
- legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
此时我们导入数学成绩：88，76，61，59，84，90，91，87
var ydata2 = [88,76,61,59,84,70,91,87]
legend: {
data: ['语文成绩','数学成绩']
},
series: [
{
type: 'bar',
data: ydata,
name: '语文成绩',
},
{
type: 'bar',
data: ydata2,
name: '数学成绩'
},
],
label: {
show: true,
position: 'top'
}
折线图line
折线图的基本实现
-
步骤一：echarts最基本的代码结构
<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>Documenttitle> <script src="lib/echarts.min.js">script> head> <body> <div id='div1' style='width: 800px; height 600px'>div> <script> var mcharts = echarts.init(document.getElementById("div1")) var option = {} mcharts.setOption(option) script> body> html> -
步骤二：准备x轴的数据
var xrr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] -
步骤三：准备y轴的数据
var yrr1 = [80,90,85,79,86,90,95,98,78,82,50,76] var yrr2 = [50,70,25,69,96,10,15,68,48,62,90,46] var yrr3 = [30,93,75,39,76,50,95,58,78,72,70,56]
- 步骤四：准备option,将series中的type设置为line
legend: { data: ['语文成绩','数学成绩','英语成绩'] }, tooltip: { trigger: 'item', triggerOn: 'mousemove', }, series: [ { name: '语文成绩', data: yrr1, type: 'line', }, { name: '数学成绩', data: yrr2, type: 'line', }, { name: '英语成绩', data: yrr3, type: 'line', } ]
*** 最终实现效果 ***：
折线图的常见效果
markPoint与markLine
```typescript
series: [
{
name: '数学成绩',
data: yrr2,
type: 'line',
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},{
type: 'min',源站可能有防盗 name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
}
}
]
```
markArea
series: [
{
name: '数学成绩',
data: yrr2,
type: 'line',
markArea: {
data: [
[
{xAxis: '一月'},
{xAxis: '三月'}
],
[
{xAxis: '六月'},
{xAxis: '八月'}
]
]
}
}
]
平滑线条：smooth/线条样式：lineStyle.
```typescript
series: [
{
name: '数学成绩',
data: yrr2,
type: 'line',
smooth: true,
lineStyle: {
color: '#550055',
type: 'dashed'//线条类型，dashed为虚线,solid为实线,dotted为点线
}
},
]
```
填充风格：areaStyle
series: [
{
name: '数学成绩',
data: yrr2,
type: 'line',
smooth: true,
areaStyle: {
color: 'green'
}
},
]
紧挨边缘：boundaryGap
xAxis: {
type: 'category',
data: xrr,
boundaryGap: false
},
boundaryGap设置让x轴坐标从0开始,默认为true.
缩放, 脱离0值比例：scale
当我们把分数设置的很大切很接近时,我们会发现折线图变成了一条直线.
修改分数：
var yrr2 = [5000,5000,5050,5090,5060,5000,5050,5080,5080,5020,5000,5060]
原因很简单,我们会发现y轴数据从0开始所以会导致我们的数据可能会较为集中,所以我们可以设置y轴数据不从0开始.
scale配置
yAxis: {
type: 'value',
scale: true
},
堆叠图：stack
series: [
{
name: '语文成绩',
data: yrr1,
type: 'line',
stack: 'st1'//只要stack的名字相同即可
},
{
name: '数学成绩',
data: yrr2,
type: 'line',
stack : 'st1'
},
]
我们可以发现,使用堆叠图后,这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基础之上进行绘制. 基于前一个图表进行堆叠.
散点图：scatter
散点图的基本实现
- 步骤一：echarts 最基本的代码结构
<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>Documenttitle>
<script src="lib/echarts.min.js">script>
head>
<body>
<div id='div1' style='width: 800px; height 600px'>div>
<script>
var mcharts = echarts.init(document.getElementById("div1"))
var option = {}
mcharts.setOption(option)
script>
body>
html>
- 步骤二: 准备 x 轴和 y 轴的数据
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 }, { "gender": "female", "height": 166,
"weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, {
"gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female",
"height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9,
"weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, {
"gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female",
"height": 160, "weight": 50 }, { "gender": "female", "height": 147.2,
"weight": 49.8 },...此处省略...]
假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散点图需要的数据.
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var itemArr = [height, weight]
axisData.push(itemArr)
}
axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重.
- 步骤三：准备配置项
- xAxis 和 yAxis 的 type 都要设置为 value
- 在 series 下设置 type:scatter
- 设置scale，脱离0值比例
var option = {
title: {
text: '散点图',
left: 'center'
},
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
data: axisData
}
]
}
*** 最终实现效果 ***
散点图的常见效果
气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同.
symbolSize控制散点的大小itemStyle.color控制散点的颜色
series: [
{
type: 'scatter',
data: axisData,
symbolSize: 16,
itemStyle: {
color: 'blue'
}
}
]
通过回调函数让不同点的大小和颜色
series: [
{
type: 'scatter',
data: axisData,
symbolSize: function(arg){
var height = arg[0] / 100
var weight = arg[1]
var bmi = weight / (height * height)
if(bmi > 28){
return 20
}
return 10
},
itemStyle: {
color: function(arg){
var height = arg.data[0] / 100
var weight = arg.data[1]
var bmi = weight / (height * height)
if(bmi > 28){
return 'green'
}
return 'blue'
}
}
}
]
- 涟漪动画效果
- type:effectScatter
将type的值从 scatter 设置为effectScatter就能够产生涟漪动画的效果 - rippleEffect
rippleEffect可以通过scale属性配置涟漪动画的大小 - showEffectOn
showEffectOn可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis.
render代表界面渲染完成就开始涟漪动画
emphasis代表鼠标移过某个散点的时候, 该散点开始涟漪动画
- type:effectScatter
series: [
{
type: 'effectScatter',
......
......
......
rippleEffect: {
scale: 2
},
showEffectOn: 'emphasis'
}
]
直角坐标系的常见配置
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图针对于直角坐标系的图表, 有一些通用的配置.
- 配置一：网格
grid- 显示grid
grid: {
show: true,
},
- grid的边框的颜色、大小和位置
grid: {
show: true,
borderColor: 'blue',// 边框的颜色
borderWidth: 5,// 边框的宽度
width: 500, // 边框的宽高
height: 400,
left: 120,//边框的位置
top: 120
},
- 配置二：坐标轴
axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴- 坐标轴类型
type - 坐标轴位置
position
- 坐标轴类型
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'left'
},
- 配置三：区域缩放
dataZoom
dataZoom用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着可以配置多个区域缩放器- 区域缩放类型
typeslider: 滑块inside: 内置, 依靠鼠标滚轮或者双指缩放
- 产生作用的轴
xAxisIndex:设置缩放组件控制的是哪个 x 轴, 一般写0即可yAxisIndex:设置缩放组件控制的是哪个 y 轴, 一般写0即可
- 指明初始状态的缩放情况
start: 数据窗口范围的起始百分比end: 数据窗口范围的结束百分比
- 区域缩放类型
var option = {
dataZoom: [ // 控制区域缩放效果的实现
{
type: 'slider', // 缩放的类型 slide代表滑块 inside代表依靠鼠标滚轮
// type: 'inside'
xAxisIndex: 0
},
{
type: 'slider',
yAxisIndex: 0,
start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
}
],
...
...
...
}
需要注意的是, 针对于非直角坐标系图表, 比如饼图、地图 等, 以上三个配置可能就不会生效了.
饼图
- 步骤一：ECharts基本代码
<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>Documenttitle>
<script src="lib/echarts.min.js">script>
head>
<body>
<div id='div1' style='width: 800px; height 600px'>div>
<script>
var mcharts = echarts.init(document.getElementById("div1"))
var option = {}
mcharts.setOption(option)
script>
body>
html>
- 步骤二：准备数据
var piedata = [
{
name: '短袖',
value: 75
},
{
name: '卫衣',
value: 55
},
{
name: '运动裤',
value: 65
},
{
name: '羽绒服',
value: 32
},
{
name: '雪地靴',
value: 12
}
]
- 步骤三：设置title，在
series下设置type的值为pie，
title: {
text: '服装店销售情况图'
},
series: [
{
type: 'pie',
data: piedata
}
]
饼图的常见效果
- 格式化显示内容
通过series中label的formatter设置显示的内容.
label: {
show: true,
formatter: function(arg) {//回调函数
return arg.name + "的销售量为:" + arg.value +"件\n" + arg.percent + "%"
}
}
- 南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大.
roseType:'radius'
series: [
{
type: 'pie',
data: piedata,
label: {
show: true,
formatter: function(arg) {
return arg.name + "的销售量为:" + arg.value +"件\n" + arg.percent + "%"
}
},
roseType: 'radius'
}
]
- 选中效果
selectMode: 'multiple':选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选.
selectedOffset: 30:选中扇区的偏移距离
series: [
{
type: 'pie',
data: piedata,
label: {
show: true,
formatter: function(arg) {
return arg.name + "的销售量为:" + arg.value +"件\n" + arg.percent + "%"
}
},
roseType: 'radius',
selectedMode: 'multiple',
selectedOffset: 50
}
]
- 圆环
radius:饼图的半径。可以为如下类型：
number ：直接指定外半径值. string ：例如， ‘20%’ ,表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度. Array. ：数组的第一项是内半径,第二项是外半径, 通过 Array , 可以将饼图设置为圆环图.
series: [
{
type: 'pie',
data: piedata,
label: {
show: true,
formatter: function(arg) {
return arg.name + "的销售量为:" + arg.value +"件\n" + arg.percent + "%"
}
},
roseType: 'radius',
radius: ['30%','50%']
}
]
地图
如何使用HTTP服务打开文件
由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应
该将其置于 HTTP 的服务之下方可正常展示地图.
在VSCode中安装live server插件.
然后
用Open with Live server打开文件即可
地图图表的使用方式
百度地图API: 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的.
矢量地图的实现步骤
- 步骤一：ECharts 最基本的代码结构
<!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 id='div1' style='width: 800px; height 600px'></div>
<script>
var mcharts = echarts.init(document.getElementById("div1"))
var option = {}
mcharts.setOption(option)
</script>
</body>
</html>
-
步骤二：准备中国的矢量 json 文件, 放到 json/map/ 目录之下
-
步骤三：使用 Ajax 获取 china.json
$.get('json/map/china.json', function (chinaJson) {
})
- 步骤四：在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
echarts.registerMap('chinaMap', chinaJson)
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
})
- 步骤五：获取完数据之后, 需要配置 geo 节点, 再次的 setOption
type : 'map'
map : 'chinaMap'
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
var option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
}
};
mCharts.setOption(option)
})
实现效果
地图的常见配置
- 缩放拖动:
roam
var option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true, // 运行使用鼠标进行拖动和缩放
}
}
- 名称显示:
label
var option = {
geo: {
type: 'map',
map: 'chinaMap111', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
},
}
}
- 初始缩放比例:
zoom
var option = {
geo: {
type: 'map',
map: 'chinaMap111', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
},
zoom: 1, // 设置初始化的缩放比例,大于1表示放大,小于1表示缩小
}
}
- 地图中心点:
center
var option = {
geo: {
type: 'map',
map: 'chinaMap111', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
},
zoom: 1, // 设置初始化的缩放比例,大于1表示放大,小于1表示缩小
center: [105.617733, 34.792818] // 设置视角中心点,经纬度表示
}
}
效果展示
此时，我们可以拖动该地图，同时可以使用鼠标滚轮进行放大或者缩小。
地图的常见效果
- 显示某个区域
- 准备安徽省的矢量地图数据
- 加载安徽省地图的矢量数据
- 在Ajax的回调函数中注册地图矢量数据
- 配置 geo 的 type:‘map’ , map:‘anhui’
- 通过 zoom 调整缩放比例
- 通过 center 调整中心
- 不同城市颜色不同
- 1.显示基本的中国地图
<body>
<div style="width: 600px;height:400px;border:1px solid red"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
}
}
mCharts.setOption(option)
})
</script>
</body>
- 2.准备好城市空气质量的数据, 并且将数据设置给 series
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 option = {
......
series: [
{
data: airData
}
]
}
- 3.将 series 下的数据和 geo 关联起来
geoIndex: 0
type: 'map'
var option = {
series: [
{
data: airData,
geoIndex: 0,
type: 'map'
}
]
}
- 4.结合 visualMap 配合使用
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
},
series: [
{
data: airData,
geoIndex: 0,
type: 'map'
}
],
visualMap: {
min: 0, // 最小值
max: 300, // 最大值
inRange: {
color: ['white', 'red'] // 颜色的范围
},
calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
}
}
- 地图和散点图结合
- 1.给 series 这个数组下增加新的对象
- 2.准备好散点数据,设置给新对象的 data
var scatterData = [
{
value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度
}
]
- 3.配置新对象的 type
type:effectScatter
- 让散点图使用地图坐标系统、让涟漪的效果更加明显
coordinateSystem: 'geo'
rippleEffect: { scale: 10 }
var option = {
series: [
{
data: airData,
geoIndex: 0,
type: 'map'
}, {
data: scatterData,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10
}
}
]
}
雷达图
- 步骤1 ECharts最基本代码结构
<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>Documenttitle>
<script src="lib/echarts.min.js">script>
head>
<body>
<div id='div1' style='width: 800px; height 600px'>div>
<script>
var mcharts = echarts.init(document.getElementById("div1"))
var option = {}
mcharts.setOption(option)
script>
body>
html>
- 步骤2 定义各个维度的最大值
var dataMax = [
{
name: '易用性',
max: 100
}, {
name: '功能',
max: 100
}, {
name: '拍照',
max: 100
}, {
name: '跑分',
max: 100
}, {
name: '续航',
max: 100
}
]
- 步骤3 准备具体产品的数据
var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]
- 步骤4 在 series 下设置 type:radar
var option = {
radar: {
indicator: dataMax
},
series: [
{
type: 'radar',
data: [
{
name: '华为手机1',
value: hwScore
},
{
name: '中兴手机1',
value: zxScore
}
]
}
]
}
雷达图的常见效果
- 显示数值label
var option = {
series: [
{
type: 'radar',
label: {
show: true
},
data: [
{
name: '华为手机1',
value: hwScore
},
{
name: '中兴手机1',
value: zxScore
}
]
}
]
}
- 区域面积 areaStyle
series: [
{
label: {
show: true
},
type: 'radar', // radar 此图表时一个雷达图
label: { // 设置标签的样式
show: true // 显示数值
},
areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
selectedMode: 'single',
data: [
{
name: '华为手机1',
value: [80, 90, 80, 82, 90],
},
{
name: '中兴手机1',
value: [70, 82, 75, 70, 78]
}
]
},
]
- 绘制类型shape
雷达图绘制类型，支持 ‘polygon’ 和 ‘circle’
‘polygon’ : 多边形
‘circle’ 圆形
radar: {
indicator: dataMax, // 配置各个维度的最大值
shape: 'circle' // 配置雷达图最外层的图形 circle polygon
},
雷达图的特点
雷达图可以用来分析多个维度的数据与标准数据的对比情况
仪表盘图
仪表盘图实现步骤
- 步骤1 ECharts 最基本的代码结构
<!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 id="div1" style="width: 600px;height:400px"></div>
<script>
var mcharts = echarts.init(document.getElementById(div1));
var option = {};
mcharts.setOption(option);
</script>
</body>
</html>
- 步骤2: 准备数据, 设置给 series 下的 data
data:[97]
- 步骤3: 在 series 下设置 type:gauge
var option = {
series: [
{
type: 'gauge',
data: [{
value: 97,
}]
}
]
}
仪表盘的常见效果
- 数值范围： max min
- 多个指针：增加data数组中的元素
- 多个指针颜色的差异：itemStyle
var option = {
series: [
{
type: 'gauge',
data: [
{
value: 97,
itemStyle: { // 指针的样式
color: 'pink' // 指针的颜色
}
}, // 每一个对象就代表一个指针
{
value: 85,
itemStyle: {
color: 'green'
}
}
],
min: 50 // min max 控制仪表盘数值范围
}
]
}
仪表盘的特点
仪表盘可以更直观的表现出某个指标的进度或实际情况
常用图表配置项小结（忘了就看）
柱状图 bar
折线图 line
散点图 scatter
饼图 pie
地图 map
雷达图 radar
仪表盘 gauge
直角坐标系的配置
- dataZoom
通用配置
