Echarts 香不香
阿里的DataV就是基于Echarts做的哟，Echarts连续多年获得中国最受欢迎的开源项目之一，这么受欢迎，通用性非常强，是完全免费的哟。
Echarts特性
- 可视化类型丰富
- 支持多种数据格式
- 千万级的前端数据渲染
- 动态数据的动画展示
- 支持基于WebGL的3D效果
- 跨平台，小程序中也能用
- 提供了数据深度搜索的系列组件
- 无障碍访问，盲人可以听到 图表内容
Echarts支持“ canvas”和“ svg”两种渲染方式。
简单的环境
Echarts 官方可以直接下载类库压缩包，可以下载源码，也可以下载编译后直接可用的代码。
VS Code 官方可以直接下载开发工具，点击右上角的Download即可完成下载，正常软件的安装方式一路点下一步，即可完成安装。
Echarts 官方文档
Echarts 术语查询手册
常用组件
系列类型
坐标系
组件
小用一把
图表示例：生成 A-Z的26种产品维度，生成26份随机数据。注意：由于数据是随机的，则每次渲染图表都不会一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '我的第一幅ECharts可视化图'
},
tooltip: {},
legend: {
data:['各产品销量情况']
},
xAxis: {
// 生成 A-Z 产品维度
data: Array(26).fill(65).map((item, index) => String.fromCharCode(item + index)).map(item => '产品' + item)
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
// 生成26份随机数据
data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>Echarts 常用
标题、提示框、工具栏、图例、时间轴、数据区域缩放、网格、坐标轴、数据系列、全局字体样式等。
标题 title
- text：主标题文本，支持\n换行
- subtext：副标题文本，支持\n换行
- left：距离左侧容器的距离，单位：像素(10)、百分比(10%)、左中右对齐(left center right)等等
- show：是否显示，默认true
提示框 tooltip
在合适的时机向用户提供相关信息
- trigger：触发类型，图形触发item、坐标轴触发axis、不触发none
formatter：悬浮层的内容格式化器，有
{a} {b} {c} {d} {e}这五个占位符，代表 系列名、数据名、数据值等。{a} {b}和{c} {d}在不同的图表中表示的含义又不相同。- 折线图、区域图、柱状图、条形图、K线图：a 系列名、b 类目值、c 数值、d 无数据
- 散点图、气泡图：a 系列名、b 数据名、c 数值数组、d 无数据
- 地图：a 系列名、b 区域名、c 合并数值、d 无数据
- 饼图、仪表盘、漏斗图：a 系列名称、b 数据项名、c 数值、d 百分比
- axisPointer：坐标指示器，子参数项 type 参数值可为：直线指示器 line、阴影指示器 shadow、十字准星指示器cross、none 无指示器
- show：是否显示，默认值为true
工具栏 toolbox
可用于将可视化图表下载到本地、查看可视化底层数据等
- show：是否显示，默认值为true
- feature：常用子参数项有： 保存图片 saveAsImage、还原初始配置 restore、可视化底层数据视图 dataView、切换多种可视化类型(如 折线图、柱状图等) magicType
图例 legend
- show：是否显示
- left：距离左侧容器的距离，单位：像素(10)、百分比(10%)、左中右对齐(left center right)等等
- top：距离顶部的距离，单位：像素(10)、百分比(10%)、顶中底部对齐（top middle bottom）等等
- orient：图例列表的朝向，默认是水平 horizontal，还可设置为 垂直 vertical
- data：图例中的数据数组，通常与数据展示的系列(series)对应起来，data与series一旦对应起来了，它们之间就是强关联的。
时间轴 timeline
用于切换多套配置项，baseOption、options，每次切换时，baseOption + options配置中某一项的进行合并配置，合并后的配置会用来渲染当前时间的图表。
- baseOption：默认配置，子参数项 timeline：是否循环 loop、反向播放 rewind、播放速度 playInterval、播放按钮的位置 controlPosition。
- options：配置集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
baseOption: {
timeline: {
data: ['2020', '2021', '2022']
},
title: {
subtext: '秀哇'
},
grid: {},
xAxis: [
{
'type': 'category',
// 生成 A-Z 公司维度
data: Array(26).fill(65).map((item, index) => String.fromCharCode(item + index)).map(item => '公司' + item)
}
],
yAxis: [
{
'type': 'value'
}
],
series: [
{ // 系列一的一些其他配置
type: 'bar'
}
]
},
options: [
{ // 这是'2020' 对应的 option
title: {
text: '2020年销量情况'
},
series: [
{ // 生成26份随机数据
data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
} // 系列一的数据
]
},
{ // 这是'2021' 对应的 option
title: {
text: '2021年销量情况'
},
series: [
{ // 生成26份随机数据
data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
}
]
},
{ // 这是'2022' 对应的 option
title: {
text: '2022年销量情况'
},
series: [
{ // 生成26份随机数据
data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>数据区域缩放 dataZoom
向用户提供区域缩放的功能
- 滑动条型的数据区域缩放 dataZoomSlider
- 内置型的数据区域缩放 dataZoomInside
- 框选型的数据区域缩放 dataZoomSelect
滑动条形的数据区域缩放 和 内置型的数据区域缩放
属于dataZoom的子参数项中的配置，常用配置项有
- xAxisIndex：要控制的X轴的索引，支持取数字和数组，表示控制一个可视化图表中多个图表(比如多条折线图)的那几个图表，0表示第一条折线图。
filterMode：过滤模式，dataZoom 数据区域缩放的本质就是数据过滤，也就是过滤掉 缩放区域外 的内容。过滤模式也有多种。
- filter：过滤掉缩放区域外的数据，当一个可视化图表中包含多个轴时，会影响其它轴的数据范围，对于数据而言，只要有
一个维度在缩放区域之外，就会直接被过滤掉。 - weakFilter：过滤缩放区域外的数据，当一个可视化图表中包含多个轴时，会影响其它轴的数据范围，对于数据而言，当
所有的维度在缩放区域之外，才会直接被过滤掉。 - empty：不影响其它轴的数据范围。
- none：不过滤掉缩放区域外的数据，只会改变其它轴的数据范围。
- filter：过滤掉缩放区域外的数据，当一个可视化图表中包含多个轴时，会影响其它轴的数据范围，对于数据而言，只要有
type：缩放类型
- slider：带滑块的缩放，可以看到图表下方有一个滑块
- inside：不带滑块的缩放，将鼠标悬浮到图表区域，然后滑动滚轮，就能缩放了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: { type: 'value' },
yAxis: { type: 'value' },
series: {
type: 'bar',
data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => [~~item, ~~item]) // 第一项对应 X 轴，第二项对应 Y 轴
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>框选型的数据缩放
属于toolbox的一个feature
在toolbox的feature中新增一个dataZoom的选项，设置show为true即可。toolbox工具箱中就会多两个按钮，分别是区域缩放和区域缩放撤回。
网格 grid
用于在坐标系中控制可视化区域的网格空间大小
grid中常用的配置项：
- x、y：x y轴的坐标位置
- width、height：网格空间的宽高
坐标轴 xAxis和yAxis
常用的有二维直角坐标系，横轴xAxis和纵轴yAxis。
xAxis、yAxis中常用的配置项：
- position：坐标轴放置的位置，x轴可以使用顶部底部 top、bottom，y轴可以使用左边右边 left、right。
- type：坐标轴的类型，数值类型的轴 value、类别类型的轴 category、时间类型的轴 time、对数类型的轴 log。value适用于连续的数值、category 适用于离散的类别、time 适用于连续的时间序列、log使用于对数数据。
- name：坐标轴的名字
- nameLocation：坐标轴名字的显示位置，start 开始位置、x轴的center和y轴的middle 中间位置、end 结束位置。
数据系列 series
series 数据系列是用来作为数据的容器，一个图表可能会包含多个系列，每个系列也可能会包含多个数据。
不同的可视化图表，series的形式并不完全相同哟，例如饼图和柱状图，更多不同请看官网series，有详细描述哟。
全局字体样式 textStyle
用于统一定制化设置字体样式，字体样式和可视化图表的搭配非常重要。设置参数的逻辑参考 CSS 样式
textStyle中常用的配置项：
- color：文字颜色，如 ``#fff
- fontStyle：文字字体风格，如 normal、italic、oblique。
- fontWeight：文字字体的粗细，如 normal、bold、bolder、lighter、100、500等。
- fontFamily：文字字体系列，如 sans-serif、serif、monospace、Arial、Courier New、Microsoft YaHei 等。
- fontSize：文字字体大小，如 14等。
Echarts 可视化图
通过以上的常用配置学习，是不是感觉echarts多写多练多查阅官方文档就可以搞定大多数图表了？是的，echarts的通用性非常的强，其实我们还有两大利器，echarts官方示例DEMO 和 民间echarts画廊。
利器：不仅可以看到很多官方DEMO和民间的DEMO，你还可以对他们的DEMO进行在线编辑，编辑后的结果还可以直接拿来用哟。非常方便嘞。
echarts官方示例DEMO
民间echarts画廊
折线图
折线图是比较常见的展示数据趋势的基础图表，常用于展示时间序列的数据。只需要将series中的type设置为line即可。
如：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
常用配置参数
- smooth：折线的平滑度，设置为true时折线图就会变得非常平滑，变成一张曲线图。
- stack：对折线图进行分组，当有多条折线图时，都设置这个属性为同一个值时，同一组的折线图的数据会进行累加求和。一般会配合label属性来使用，可以很直观的看到分组后原来的数据值，也可以不配合label来使用。
- areaStyle：对折线图区域进行色彩填充，一般配合stack来使用，也可以不配合stack来使用。
- label: 折线图每一个顶点的数据值，如果要显示的话，就可以设置show为true，也可以设置数据值的显示位置，如top、bottom、left、right、middle、center等。
- emphasis：折线图的高亮效果，可以设置它的focus为 'series'来实现悬浮时高亮当前选中的这条折线图，其它折线图就会呈灰色，就算是有色彩填充的折线图，也会只高亮当前选择这条折线图。
熟悉了这些配置之后，可以去官网瞅瞅 折线的DEMO哟，民间画廊中有更多炫酷折线效果的 DEMO哟。
基于折线图变形的有聚合折线图(多条折线图)、堆叠折线图(面积图和层叠面积图)等。
柱状图
柱状图是比较常见的展示数据频数的基础图表，常用于展示离散的数据。只需要将series中的type设置为bar即可。
如：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
常用配置参数
- label：柱状图中每一个柱子的数据值，如果要显示的话，就可以设置show为true，也可以设置数据值的显示位置，如top、bottom、left、right、middle、center、side、inside等。
- stack：对柱状图进行分组，当有多种颜色的柱状图时，都设置这个属性为同一个值时，同一组的柱状图的数据会进行累加求和。一般会配合label属性来使用，可以很直观的看到分组后原来的数据值，也可以不配合label来使用。
- emphasis：柱状图的高亮效果，可以设置它的focus为 'series'来实现悬浮时高亮当前选中的这个颜色的柱状图，其它柱状图就会呈灰色。
基于柱状图变形的有聚合柱状图(垂直)、水平聚合柱状图、堆叠柱状图等。
饼图
饼图是比较常见的展示数据各项比重的基础图表，它没有坐标轴的概念，也就没有xAxis和xAxis属性，只需要将series中的type设置为pie即可。
如：
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
常用配置参数
- 将legend的orient设置为 vertical 是为了防止水平显示与标题重叠在一起。
- tooltip中的formatter：
{a}表示系列名称、{b}表示数据项名称、{c}表示数值、{d}表示百分比 - radius：如果值为一个数组，数组中有两个值，内外部半径的比例，那么饼图会变成一个环形图，表示内半径到外半径之间作为饼图的展示区域。如果值为一个值，则表示内部半径为0，外部半径为这个值。
- roseType(玫瑰类型)：南丁格尔类型，false 表示不使用南丁格尔，area 表示使用 面积模式，radius 表示使用 半径模式。面积模式会以值来计算面积来作为某一块区域来呈现玫瑰图，半径模式会以值来计算半径作为某一块区域来呈现玫瑰图。
基于饼图变形的有环形图、圆角环形图、南丁格尔玫瑰图、日历饼图、折线联动饼图等。
散点图与气泡图
散点图是常见的 比较跨类别的聚合数据 的基础图表，散点图可用于展示二个维度的数据信息 比如线性回、指数回归、多项式回归等等。
气泡图是基于散点图的，它可以用于展示三个维度的数据信息，除了x、y轴的坐标，还有大小，也就是可以用于呈现突出效果。
effectScatter 是散点图和气泡图的进阶版，带有动态装饰的效果哟。
普通效果的散点或气泡图只需要将series的type设置为scatter即可，如果要展示突出的动态装饰效果，就将series的type设置为 effectScatter。
普通散点图：
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
// 两个维度的数据
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.20],
[11.5, 7.20],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}]
};
普通气泡图：
option = {
xAxis: {},
yAxis: {},
series: [{
data: [
// 三个维度的数据
[4.0, 8.04, 10],
[9.0, 6.95, 20],
[23.0, 7.58, 30],
[18.0, 8.81, 15],
[12.0, 8.33, 16],
[28.0, 9.96, 45],
[10.0, 7.24, 18],
[14.0, 5.27, 35],
[12.0, 10.14, 20],
[10.0, 4.12, 50],
[7.0, 5.38, 13],
[37.0, 5.0, 13]
],
// 通过这个参数值来控制每一个点的大小
symbolSize: function (data) {
return data[2];
},
type: 'scatter'
}]
};
涟漪气泡图：
雷达图
雷达图是用于多个单位在不同项目上表现差异的图表，只需要将series的type设置为radar即可。
如：
option = {
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '销售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
},
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配（Allocated Budget）'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销（Actual Spending）'
}
]
}]
};
常用配置参数
雷达图也没有坐标系的概念，所以它有一个radar属性，主要也是它radar属性的参数配置
- indicator：指示器，用于存放每一个维度的名称和范围。
- name：每一个指示器名称的配置项，比如你可以在它里面写textStyle，在里面设置文字颜色color、背景色backgroundColor、边框半径borderRadius等等，设置样式的逻辑和CSS中一致。
基于雷达图变形的有：多雷达图、卫星雷达图、面积雷达图。
漏斗图
漏斗图是 用于进行转化率分析的图表，它也没有坐标轴的概念。只需要将series的type设置为funnel即可。
如：
option = {
title: {
text: '漏斗图',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['展现','点击','访问','咨询','订单']
},
series: [
{
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{value: 60, name: '访问'},
{value: 40, name: '咨询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'},
{value: 100, name: '展现'}
]
}
]
};
常用配置参数
- left：漏斗的左边距，也就是漏斗距离左边的边距
- top：漏斗的上边距，也就是漏斗距离顶部的边距
- bottom：漏斗的下边距，也就是漏斗距离底部的边距
- width：漏斗的显示宽度
- min：漏斗的最小值
- max：漏斗的最大值
- minSize：漏斗的最小宽度
- maxSize：漏斗的最大宽度
- sort：漏斗数据的排序方式，降序 descending、升序 ascending
- gap：每层漏斗之间的间距
- label：每层漏斗显示的名称，show为true时就会显示，名称显示的位置，一般都设置显示在每层漏斗的内部 inside，还可以设置 left、right、top、bottom、center、middle。
- itemStyle：每层漏斗的样式，如每层漏斗边框的颜色、每层漏斗边框的宽度
- emphasis：高亮时每层漏斗的样式，如 label的fontSize 名称的字体大小。
仪表盘
仪表盘是 用于表示事件进度的图表，只需要将series的type设置为gauge即可。
如：
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [{
value: 50,
name: 'SCORE'
}]
}]
};
常用配置参数
- progress：进度，将它的show设置为true就可以看到进度条。
- detail：仪表盘的详情数据，将它的valueAnimation设置为true，就能看到数值跳动的动画效果。通过设置它的formatter可以对要显示的数值进行过滤、格式化的操作。
基于仪表盘的变形非常的多，比如 时钟、得分环、多仪表板等等
箱线图(盒须图)
箱线图是用于表示连续性数据分布情况的图表，比如它的呈现效果的逻辑很像是折线图、柱状图这类带趋势和频数的图表。但是数据逻辑并不是，它的原始数据是二维的，一维数据的每一项会作为x轴上离散的类别，那么一维度数据中每一项中的数据会被组合成上 四位分数、上下限、异常值等。将它的series的type属性设置为boxplot即可。
如：
var getdata = [
[34,54,67,75,86],
[10,25,45,67,73],
[24,34,45,55,66],
[32,45,50,60,70]
]
var getname=['机电工程学院','自动化学院','计算机学院','轻工化工学院'];
option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '50',
right: '20',
top:'40',
bottom:'40',
},
xAxis: {
type: 'category',
data: getname,
axisLabel: {
color: '#777777',
textStyle: {
fontSize: '13'
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#333333',
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name:'分数（分）',
nameTextStyle: {
color: '#777777',
fontSize: 13,
padding:[0,0,0,60]
},
axisLabel: {
color: '#777777',
textStyle: {
fontSize: '13'
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#333333',
}
},
splitLine: {
lineStyle: {
color: '#D1D1D1',
},
}
},
series: [{
name: 'boxplot',
type: 'boxplot',
data: getdata,
itemStyle: {
normal: {
borderColor: '#4B96F3',
borderWidth: 2,
color: '#D9EAFF',
}
},
tooltip: {
formatter: function(param) {
return [
'Upper: ' + param.data[5] + ' 分',
'Q3: ' + param.data[4] + ' 分',
'Median: ' + param.data[3] + ' 分',
'Q1: ' + param.data[2] + ' 分',
'Lower: ' + param.data[1] + ' 分'
].join('<br/>')
}
}
}, {
name: '异常',
type: 'scatter',
symbolSize: 10,
data: [
[0, 17, "异常"],
],
itemStyle: {
normal: {
color: 'rgba(75,150,243,.7)',
}
},
label: {
show: false,
},
},{
name: '异常',
type: 'scatter',
symbolSize: 10,
data: [
[3, 75, "异常"],
],
itemStyle: {
normal: {
color: 'rgba(75,150,243,.7)',
}
},
label: {
show: false,
},
}
]
};
常用配置参数
- tooltip：工具提示，不是全局的那个tooltip，只是该箱线图的tooltip，用于格式化某一个箱线图的悬浮提示。
基于箱线图(盒须图)的变形有 多系列箱线图、垂直箱线图、水平箱线图等。
热力图
热力图是密度型的图表，散点图、气泡图也属于密度型图表，所以热力图的数据，散点图或气泡图也能使用，所以热力图的数据是三维的。但热力图是使用不同的颜色以及深浅颜色来表示数据的差异，而气泡图是通过点的大小来表示数据的差异的。将它的series的type属性设置为heatmap即可。
如：
var hours = [0,1,2,3,4,5,6,7,8,9];
var ydays1 = ['0', '1万', '10万',
'50万', '100万', '500万', '1000万', '5000万', '1亿', '10亿以上'].reverse();
var ydays2 = ['1万', '10万',
'50万', '100万', '500万', '1000万', '5000万', '1亿', '10亿', ' '].reverse();
var data = []
for(let i = 0;i<10;i++) {
for (let j = 0;j<10;j++) {
data.push([i,j,parseInt(Math.random() * 10)])
}
}
option = {
title: {
text: 'xx规模分布图',
left: '8%',
align: 'right'
},
tooltip: {
position: 'top'
},
animation: false,
grid: {
width: 650,
height: 500,
top: '10%'
},
xAxis: {
show: false,
type: 'category',
data: hours,
splitArea: {
show: true
}
},
yAxis: [{
name: '单位(元)',
type: 'category',
data: ydays1,
splitArea: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},{
type: 'category',
data: ydays2,
splitArea: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
visualMap: [{
type: 'piecewise',
splitNumber: 6,
showLabel: false,
pieces: [
{gt: 9, color: '#F06326', symbol: 'rect'},
{gt: 8, lt: 9, color: '#F06326', symbol: 'rect'},
{gt: 7, lt: 8, color: '#F06326', symbol: 'rect'},
{gt: 6, lt: 7, color: '#F48A5D', symbol: 'rect'},
{gt: 5, lt: 6, color: '#F48A5D', symbol: 'rect'},
{gt: 4, lt: 5, color: '#FFB366', symbol: 'rect'},
{gt: 3, lt: 4, color: '#FFB366', symbol: 'rect'},
{gt: 2, lt: 3, color: '#FFCF9F', symbol: 'rect'},
{gt: 1, lt: 2, color: '#FFE7CF', symbol: 'rect'},
{lt: 1, color: '#FFF4EB'},
],
itemWidth: 16,
itemHeight: 12,
itemGap: 0,
text: ['1000','0'],
inverse: true,
min: 0,
max: 10,
seriesIndex: [0],
orient: 'horizontal',
left: '5%',
bottom: '5%'
}],
legend: {
data: [{
name: '当前项目预算所在区间',
icon: 'circle',
}],
orient: 'horizontal',
seriesIndex: [1],
right: '30%',
bottom: '5%',
itemWidth: 15,
itemHeight: 15,
itemGap: 30,
textStyle: {
color: '#',
fontSize: 16,
},
},
series: [{
name: '类似项目 Punch Card',
type: 'heatmap',
data: data,
label: {
show: false
},
itemStyle: {
borderWidth: '2',
borderColor: '#fff'
},
zlevel: 2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},{
name: '当前项目预算所在区间',
type: 'scatter',
color: '#2CB7CA',
zlevel: 3,
symbolSize: function (val) {
return 15;
},
data: [
[1,6,4]
]
}]
};
常配合visualMap一起使用。基于热力图变形的有：热力地图、日历图等。
旭日图
旭日图是进化版的饼图，它不仅可以展示数据各项比重，还可以体现各项数据的层级关系。将它的series的type属性设置为sunburst即可。
如：
var data = [{
name: 'Grandpa',
children: [{
name: 'Uncle Leo',
value: 15,
children: [{
name: 'Cousin Jack',
value: 2
}, {
name: 'Cousin Mary',
value: 5,
children: [{
name: 'Jackson',
value: 2
}]
}, {
name: 'Cousin Ben',
value: 4
}]
}, {
name: 'Father',
value: 10,
children: [{
name: 'Me',
value: 5
}, {
name: 'Brother Peter',
value: 1
}]
}]
}, {
name: 'Nancy',
children: [{
name: 'Uncle Nike',
children: [{
name: 'Cousin Betty',
value: 1
}, {
name: 'Cousin Jenny',
value: 2
}]
}]
}];
option = {
series: {
type: 'sunburst',
// emphasis: {
// focus: 'ancestor'
// },
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
};
常用配置参数
旭日图的data是一棵树哟，每一层基本都是由name、value、children构成，通过children来指示层级。旭日图配上emphasis的focus非常香。
旭日图的变形有：圆角旭日图、单色日爆图等。
桑基图
桑基图是用于表示能量分流的图表，也叫做桑基能量平衡图，每一个延伸的分支宽度代表了能量的大小，主要的特征是首末端的能量相等。将它的series的type设置为sankey即可。它的数据格式很像是关系图，data就像是节点，links就像边，不过边有权重，权重会变成边的宽度。
如：
option = {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
// 节点
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
// 关系
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'b1',
target: 'c',
value: 2
}]
}
};
桑基图默认是很朴素的，但是在官网和 民间画廊中的桑基图都比较炫酷。
词云图
词云图是将文本的权重(重要程度)或频数数值作为文本的大小来呈现的文字图表，图表中全都是文字。只需要将series的type设置为wordCloud即可。
如：
let datas = [
{name: "雨伞", value: 30},
{name: "晴天", value: 28},
{name: "电话", value: 24},
{name: "手机", value: 23},
{name: "下雨", value: 22},
{name: "暴雨", value: 21},
{name: "多云", value: 20},
{name: "雨衣", value: 29},
{name: "屋檐", value: 28},
{name: "大风", value: 27},
{name: "台风", value: 26},
{name: "下雪", value: 25},
{name: "打雷", value: 24},
{name: "小雨", value: 30},
{name: "中雨", value: 18},
{name: "大雨", value: 14},
{name: "雷阵雨", value: 13},
{name: "下雪", value: 12},
{name: "小雪", value: 11},
{name: "中雪", value: 10},
{name: "大雪", value: 9},
{name: "暴雪", value: 8},
{name: "东风", value: 7},
{name: "南风", value: 6},
{name: "西北风", value: 5},
{name: "北风", value: 4},
{name: "闪电", value: 3}
]
option = {
tooltip: {
show: true,
position: 'top',
textStyle: {
fontSize: 30
}
},
series: [{
type: "wordCloud",
// 网格大小，各项之间间距
gridSize: 20,
// 形状 circle 圆，cardioid 心， diamond 菱形，
// triangle-forward 、triangle 三角，star五角星
shape: 'circle',
// 字体大小范围
sizeRange: [20, 50],
// 文字旋转角度范围
rotationRange: [0, 90],
// 旋转步值
rotationStep: 90,
// 自定义图形
// maskImage: maskImage,
left: 'center',
top: 'center',
right: null,
bottom: null,
// 画布宽
width: '50%',
// 画布高
height: '50%',
// 是否渲染超出画布的文字
drawOutOfBound: false,
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 200 + 55),
Math.round(Math.random() * 200 + 55),
Math.round(Math.random() * 200 + 55)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#2ac'
}
},
data: datas
}]
};
词云图搭配关键字排名，是比较炫酷的可视化效果。
树图
树图 是常见的突出层级关系的图表，它可以包含大量的层级关系，父子关系、兄弟姊妹关系。只需要将它的series的type设置为tree即可。树图的数据结构层次很像是旭日图哟，也正如前面所说的，旭日图的data是一棵树嘞。
如：
const data = {
name: 'flare'
};
data.children = [{
"name": "flex",
"children": [{
"name": "FlareVis",
"value": 4116
}]
},
{
"name": "display",
"children": [{
"name": "DirtySprite",
"value": 8833
},
{
"name": "LineSprite",
"value": 1732
},
{
"name": "RectSprite",
"value": 3623
},
{
"name": "TextSprite",
"value": 10066
}]
}];
data.children.forEach(function(datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 7,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}]
}
树图的应用很常见，但Echarts的树图很普通，没见过什么好看的树图。但是矩形树图就很哇塞。
矩形树图
矩形树图是用于表示数据层级关系和数据的权重关系的图表，它是通过嵌套关系以及矩形大小来。它虽然叫矩形树图，但是展示上并不像树哟，只是数据结构的格式像树，作用和旭日图蛮像的。使用它的话只需要将series中的type设置为treemap。
如：
option = {
series: [{
type: 'treemap',
data: [{
name: 'nodeA', // First tree
value: 10,
children: [{
name: 'nodeAa', // First leaf of first tree
value: 4
}, {
name: 'nodeAb', // Second leaf of first tree
value: 6
}]
}, {
name: 'nodeB', // Second tree
value: 20,
children: [{
name: 'nodeBa', // Son of first tree
value: 20,
children: [{
name: 'nodeBa1', // Granson of first tree
value: 20
}]
}]
}]
}]
};
矩形树图是一个比较有意思的图，我比较喜欢，比如你可以在官网示例中看到Echarts中看到 所有配置项组成的矩形图
关系图
关系图是用于表示关系网络的图表，通常由两部分组成，节点和边，节点表示某类实体，实体与实体之间会用边来进行关联，关联之后就表示两个实体之间具有某种关系。使用它的话只需要将series的type设置为treemap即可。
如：
option = {
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: [{
name: '节点1',
x: 300,
y: 300
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
}, {
source: '节点2',
target: '节点1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
关系图很有意思哟，它多用于数据分析领域，并且它也支持可编辑功能，常见的流程图、类图、时序图也可以用它来实现哟。
Echart中的色彩搭配
echarts中的色彩搭配是一件很有意思的事情，有美感的人可以搭配出各种各样的图表皮肤，当然官方也提供了六套普通的皮肤哟，年代感 vintage、暗黑 drak、麦卡龙 macarons、信息图表 infographic、闪耀 shine、罗马 roma 风格，除了这些风格外，同时我们也可以自己去定制搭配。色彩主题的制定比较讲究哟，毕竟每个人的对场景的理解和审美都不太一样，用错场景的色彩主题，也许效果适得其反。可以多看看不同场景下的可视化色彩主题风格，这样你就有不少对可视化色彩主题风格的理解与感悟了。
定制搭配
在定制搭配界面，官方又给了我们十种默认的搭配方案哟，搭配的界面分为两个部分，分别是功能区和预览区。在功能区中可以调节可视化图表中系列的个数、也能设置echarts中许多配置，比如 图例、工具箱、提示框等等。
操作和使用
通过在功能区去调节每一个配置项的数据，就能在右侧预览区看到相应的效果了。配置完毕后，有两种方式获取你配置的主题。
- 下载主题JSON：一个配置文件，需要你编写注册这套皮肤的代码。注册皮肤的原理是，echarts默认配置与这套皮肤的配置进行合并，合并后的配置就是你最终的echarts配置。
- 下载主题的js文件：这是一个带有注册这套皮肤代码的umd模块化的js文件，可以直接使用，原理同导出主题JSON一致。
导入和导出主题编辑器的操作配置
注意哟，导出的配置并不能直接在Echarts中使用，只能在Echarts主题编辑器中使用，使用的方式就是导入配置。这个配置相当于保存了之前在这个主题编辑器中的操作数据，你可以反复导入导出，来多次编辑你自己定义的主题，让主题中的色彩搭配更加漂亮。
不同场景下的Dashboard 仪表板
可视化图表一般用于制作Dashboard(商业智能仪表盘)，它也可以叫做商业智能仪表板。主要用于呈现数据可视化效果，通过可视化的方式为企业和用户度量信息和关键业务指标，都是有一些关键指标和多张可视化图表构成。
比如DevOps(研发流程一体化)的仪表板，包括 折线图、柱状图、雷达图、环形饼图等。我们可以很直观的看到一些工程数的信息，包括接入项目数、接入流水线数、接入工程数、以及构建频率趋势和部署频率随时间变化变化情况等。
Dashboard中的信息可以帮助企业和用户了解他们所关注的内容，辅助他们做出决策。比如电商销售情况的仪表板、车联网情况的仪表板、股票交易情况的仪表板等等。
DevOps(研发流程一体化)的仪表板
一个仪表板的设计，需要保证可用性、易用性、兼容性等。先考虑用户是否满足了需求，然后考虑用户是否能快速上手，最后考虑用户使用这个仪表板时是否流畅、是否能在多台设备上使用。
复杂场景下的可视化图表
一个复杂的可视化图表，一般都能拆分为三部分：数据准备部分、固定显示部分、动态数据显示部分。
- 数据准备部分：将数据过滤成该可视化图表支持的那种格式
- 固定显示部分：也就是可视化图表中固定的配置，这些配置带来的效果就是固定显示部分，比如坐标轴、图例、背景色、颜色、宽高、位置、悬浮提示、虚拟地图等等
- 动态数据显示部分：这部分数据是动态获取的，最终也会需要经过过滤，变成可视化图表支持的数据格式。
复杂场景下的可视化图表有时会使用到一些Echarts高级用法和快速开发工具，比如富文本、响应式自适应、事件行为、三维可视化、基于Echarts封装的更上一层的应用级框架V-charts等等等，这个我会尽快在下一篇Echarts类的文章中对它进行介绍。
