【数据可视化】Echarts官方文档及常用组件
【数据可视化】Echarts官方文档及常用组件
1. 前言
前面介绍了柱状图、折线图、饼图3种最为常见图表的绘制和使用：【数据可视化】Echarts最常用图表，但是没有介绍在遇到问题时如何寻求帮助，也没有详细介绍图表中组件的使用。这次来介绍ECharts中官方文档、常用组件的使用方法，可以更加快捷地创建清晰明了、实用的图表。 以下代码均在VScode中使用。
2. Echarts官方文档介绍
对于ECharts官方文档，不要期望一天就能够看完整个文档，并理解文档的所有内容，而应该将文档看成一部参考手册，在使用ECharts绘制图表时，应该知道如何随时快速地查询。 对于ECharts这么庞大的文档，没有必要记忆，也不太可能记忆全部配置项的内容。因此，只需记住几个常用配置项的英文单词，如title、legend、toolbox、tooltip等。在ECharts 4.x/5.x的官网中，最为重要的文档为实例、教程、API和配置项手册。
查询ECharts 5.x“文档”菜单中“API”子菜单的步骤如下。 （1）进入ECharts 5.x的官网，开发者使用得最多的就是“文档”菜单。单击“文档”菜单，弹出7个子菜单，其中最为重要的是“使用手册”“API”“配置项手册”。 （2）单击“文档”菜单的子菜单“API”后，“API”界面分为左边的导航区和右边的信息主显示区。单击左边导航区中的链接，就可在右边的信息主显示区中显示该链接所对应的详细内容，如图所示。
查询ECharts 5.x“文档”菜单中的“配置项手册”子菜单时，具体步骤如下。 （1）单击“文档”菜单中的子菜单“配置项手册”；或在已进入“文档”页面后，单击左上角的“配置项”链接，都可以进入“配置项”子界面。“配置项”子界面也分为左边的导航区和右边的信息主显示区。单击左边导航区中的链接，就可在右边的信息主显示区中显示该链接所对应的内容，如图所示。
（2）在对配置项（option）不太熟悉的情况下，可在“配置项手册”界面的左上角的文本框中输入需要查询的配置项（支持模糊查询），按Enter键确认后，ECharts将返回查询结果，并高亮显示所查询到的结果。如图所示，在文本框中输入想要查询的内容“title.textstyle.font”后按Enter键，在文本框的下方会显示已查询到的结果。此处共查询到4条结果（如右边第一个边框所示），并在下面的 信息主显示区高亮显示已查询到的结果（如图中第2、3个边框所示）。
（3）对配置项比较熟悉时，可以通过单击导航窗格中的 图标或 图标展开或收缩左边导航区中的配置项。当鼠标单击某一配置项时，信息显示区会显示其详细内容，如图所示。当鼠标单击“配置项手册”界面左边第二个方框中的“title.textStyle.fontStyle”时，在右上角的方框中会出现对应的解释与说明。
3. ECharts基础架构及常用术语
3.1 ECharts的基础架构
如果使用DIV或CSS在浏览器中画图，那么只能画出简单的方框或简单的圆形。当需要画比较复杂的可视化图表时，有两种技术解决方案：Canvas和SVG。Canvas是基于像素点的画图技术，通过各种不同的画图函数，即可在Canvas这块画布上任意作画。 SVG的方式与Canvas完全不同，SVG是基于对象模型的画图技术，通过若干标签组合为一个图表，它的特点是高保真，即使放大也不会有锯齿形失真。使用Canvas和SVG两者画图，各有千秋。
ECharts是基于Canvas技术进行图表绘制的，准确地说，ECharts的底层依赖于轻量级的Canvas类库ZRender 。ZRender 是百度团队开发的，它通过Canvas绘图时会调用Canvas的一些接口。 通常情况下，使用ECharts开发图表时，并不会直接涉及类库ZRender 。ECharts基础架构中的底层基础库，如图所示。
在ECharts基础架构中基础库的上层有3个模块：组件、图类和接口。 组件模块包含坐标轴（axis）、网格（grid）、极坐标（polar）、标题（title）、提示（tooltip）、图例（legend）、数据区域缩放（dataZoom）、值域漫游（dataRange）、工具箱（toolbox）、时间轴（timeline）。 ECharts的图类模块近30种，常用的图类有柱状图（bar）、折线图（line）、散点图（scatter）、K线图（k）、饼图（pie）、雷达图（radar）、地图（map）、仪表盘（gauge）、漏斗图（funnel）。图类与组件共同组成了一个图表，如果只是制作图表的话，只需掌握好图类与组件即可完成80%左右的功能。 另外20%左右的功能涉及更高级的特性。例如，当单击某个图表上某个区域的时候，能跳转到另外一个图表上；或当单击图表上的某个区域时，将展示另外一个区域中的数据，即图表组件的联动效果。此时，需要用到ECharts接口、事件编程。这些高级内容将在后面内容中介绍。
3.2 ECharts的常用术语
3.2.1 ECharts的基本名词
使用ECharts，随处会用到它的一些基本名词术语，因此，我们应该先对这些ECharts的基本名词有一个基本印象。 因为在使用ECharts进行图表开发时以英文表达为主，所以需要掌握这些基本名词的英文单词和对应的含义。
ECharts的一些基本名词的简单介绍如表所示，后面将会对它们进行详细介绍。
3.2.2 ECharts的图表名词
ECharts的图表开发中，最核心的工作是对配置项（option）属性的设置；在配置项中，最为重要的一个属性是系列（series）中表示图表类型的属性（type）。 因此，需要对ECharts中常见的图表类型有一个大致的了解，特别是记忆图表的英文表述，如折线图（line）、柱状图（bar）、饼图（pie）、散点图（scatter）、雷达图（radar）等。
ECharts图表名词的简单介绍如表所示：
4. 直角坐标系下的网格及坐标轴
使用ECharts绘制图表时，可能会发现图表真正的绘图区域和图表容器之间有一些间隔，有时看上去不太协调。查看相关API可以得知，可以通过调整几个属性值控制绘图区域与容器之间的间距。 因此，需要了解直角坐标系下如何绘制网格（grid）及其作用、如何绘制直角坐标系下的x轴（xAxis）和y轴（yAxis）。
在ECharts的直角坐标系下，有两个重要的组件：网格（grid）和坐标轴（axis）。 ECharts中的网格是直角坐标系下定义网格布局和大小及其颜色的组件，用于定义直角坐标系整体布局。ECharts中的网格组件中所有参数的属性如表所示：
4.1 直角坐标系下的网格
定义网格布局和大小的6个参数如图所示。 由ECharts网格组件参数表和下图可知，共有6个主要参数定义网格布局和大小。其中，x与y用于定义网格的左上角的位置；x2与y2用于定义网格的右下角的位置；width与height用于定义网格的宽度和高度；指定width后将忽略x2，指定height后将忽略y2。
注意：在ECharts 5.x中，x使用left替代，y使用top替代，x2使用right替代，y2使用bottom替代。
利用某一时间未来一周气温变化数据绘制折线图，并为图表配置网格组件，如图所示。 从图可以看出，本例中的网格边界线为4条边上的宽度为5px的粗线条。 （图一）
4.2 直角坐标系下的坐标轴
直角坐标系下有3种类型的坐标轴（axis）：类目型（category）、数值型（value）和时间型（time）。 （1）类目型：必须指定类目列表，坐标轴内有且仅有这些指定类目坐标。 （2）数值型：需要指定数值区间，如果没有指定，将由系统自动计算从而确定计算数值范围，坐标轴内包含数值区间内的全部坐标。 （3）时间型：时间型坐标轴用法与数值型的非常相似，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同而自动切换需要显示的时间粒度，例如：时间跨度为一年，系统将自动显示以月为单位的时间粒度；时间跨度为几个小时，系统将自动显示以分钟为单位的时间粒度。
坐标轴组件的属性如表所示。其中，某些选项仅对特定的类型有效，请注意适用类型。 坐标轴分为xAxis和yAxis，二者配置项大多数类似。
坐标轴组件属性示意图如图所示：
利用某一年的蒸发量、降水量、最低气温和最高气温数据绘制双x轴和双y轴的折柱混搭图，并设置坐标轴的相关属性，如图所示： 图二
由图可知，有上、下两条横轴，左、右两条纵轴，并且下边的横轴中有一个数据项标签较为突出，这是因为ECharts允许对个别标签进行个性化定义，数组项可设置为一个对象，并使用子属性textStyle设置个性化标签。
5. 标题组件与图例组件
5.1 标题组件
九宫格布局是一种常用的布局方式，ECharts中的大部分组件都支持九宫格布局。 标题组件（title），顾名思义，就是图表的标题，它是ECharts中的一个比较简单的组件。 图例组件（legend）也是ECharts中的一种常用组件，它以不同的颜色区别系列标记的名字。为了完善整个图表，需要配置和使用ECharts中的标题组件和图例组件。
在ECharts 2.x中，单个ECharts实例最多只能拥有一个标题组件（title），每个标题组件可以配置主标题、副标题。 而在ECharts 3.版本之后，可以配置任意多个标题组件，这在需要对标题进行排版时，或单个实例中的多个图表都需要标题时会比较有用，其中，标题（title）组件的属性如表所示
标题组件属性示意图如图所示：
标题组件支持九宫格布局，其实，ECharts中很多组件也都支持九宫格布局。 九宫格布局是将一个区域分为9个部分，如图所示。最上面一行共分为3个格子，可通过x、y（在ECharts 2.x中使用x、y，在ECharts 3.0开始使用left、top）这两个属性，分别设置为(‘left’,‘top’)、(‘center’,‘top’)、(‘right’,'top’)。 中间的一行也分为3个格子，分别是(‘left’,‘center’)、(‘center’,‘center’)、(‘right’,'center’)。 最下面的一行也分为3个格子，分别是(‘left’,‘bottom’)、(‘center’,‘bottom’)、(‘right’,‘bottom’)。当然，九宫格布局也可以通过一对数值进行定位。
利用某一时间的未来一周气温变化数据绘制折线图，并为图表配置标题组件，如图所示。 从图可以看出，该图为一个折线图，并在图表的左上角配置了主标题和副标题。 图三：
利用某个月20天内气温变化、空气质量指数、金价走势和股票A走势数据，在一个DOM容器中绘制散点图，并分别为4个图表配置标题组件，如图所示。 由图可知，图中一共含有4个散点图，并且每一个图表都配置了标题，一共配置了4个标题。 图四：
5.2 图例组件
图例（legend）组件是ECharts中较为常用的组件，它用于以不同的颜色区别系列标记的名字，表述了数据与图形的关联。用户在操作时，可以通过单击图例控制哪些数据系列显示或不显示。 在ECharts 3.x以后的版本中，单个ECharts实例可以存在多个图例组件，方便多个图例的布局。当图例数量过多时，可以使用滚动翻页。
在ECharts中，图例组件（legend）的属性如表所示：
图例组件属性示意图如图所示：
利用某一年的蒸发量、降水量、最低气温和最高气温数据绘制折柱混搭图，并为图表配置图例组件。 当图例数量过多或图例长度过长时，可以使用垂直滚动图例或水平滚动图例，参见属性legend.type。此时，设置type属性的值为“scroll”，表示图例只显示在一行，多余的部分会自动呈现为滚动效果，如图所示。 由图可知，右上方的图标即图例的滚动图标，
可以将图例呈现为滚动效果。
图五：
6. 工具箱组件与详情提示框组件
ECharts中的工具箱（toolbox）组件包含了可视化图表中一些附加的功能，它内置了多个子工具。 详情提示框（tooltip）组件可以展现出更为详细的数据。为更加便捷地操作图表并详细地观察图表中的数据，需要配置和使用工具箱组件与详情提示框组件。
6.1 工具箱组件
ECharts中的工具箱（toolbox）组件功能非常强大，其内置有6个子工具，包括标记（mark）、数据区域缩放（dataZoom）、数据视图（dataView）、动态类型切换（magicType）、重置（restore）、导出图片（saveAsImage）。工具箱组件中最主要的属性是feature，这是工具箱组件的配置项，6个子工具的配置都需要在feature中实现。 除了各个内置的工具按钮外，开发者还可以自定义工具按钮。注意：自定义的工具名字只能以my开头，如myTool1、myTool2。
在ECharts中，工具箱（toolbox）组件的属性如表所示：
利用2020年3月7日—2020年3月22日某学校作业成绩的最高分和最低分数据绘制折线图，并为图表配置工具箱组件，如图所示。 从图可以看出，图表的右上角配置了8个工具
图六：
6.2 详情提示框组件
详情提示框（tooltip）组件又称气泡提示框组件或弹窗组件，也是一个功能比较强大的组件。 当鼠标滑过图表中的数据标签时，会自动弹出一个小窗体，展现更详细的数据。 有时为了更友好地显示数据内容，还需要对显示的数据内容做格式化处理，或添加自定义内容。 详情提示框组件的属性如表所示。在详情提示框组件中，最为常用的属性是trigger（触发类型）属性。
利用一周内商家的收入数据绘制柱状图，并为图表配置详情提示框组件，如图所示。 由图可知，在图中，当鼠标指针滑过图表中的数据标签时，图表中出现了更为详细的信息。 图七：
7. 标记点和标记线
在一些折线图或柱状图当中，可以经常看到图中对最高值和最低值进行了标记。 在ECharts中，标记点（markPoint）常用于表示最高值和最低值等数据，而有些图表中会有一个平行于x轴的、表示平均值等数据的虚线。 在ECharts中，标记线（markLine）常用于展示平均值等。为了更好地观察数据中的最高值、最低值和平均值等数据，需要在图表中配置和使用标记点与标记线。
- 标记点 在ECharts中，标记点有最大值、最小值、平均值的标记点，也可以是任意位置上的标记点，它需要在series字段下进行配置。标记点的各种属性如表所示：
- 标记线 ECharts中的标记线是一条平行于x轴的水平线，有最大值、最小值、平均值等数据的标记线，它也是在series字段下进行配置的。标记线的各种属性如表所示：
利用某商场商品的销量数据绘制柱状图，并利用标记点和标记线标记出数据中的最大值、最小值和平均值，如图所示。
图八：
从图可以看出，图表中利用标记点标记出了数据中的最小值为15，最大值为100，并利用标记线标记出了数据中的平均值为53.5。
8. 附文中绘图代码
8.1 图一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-1-网格组件配置示例</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
<script src="../../public/lib/echarts/langZH.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height: 600px;"></div>
<script>
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"), null, {
locale: "ZH"
});
//指定图表的配置项和数据
let option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
left: 45, top: 66, //设置网格左上角的位置
width: '93%', height: '80%', //设置网格的宽度和高度
right: 120, bottom: 100, //设置网格右下角的位置
borderWidth: 5, //设置网格边界线的宽度
borderColor: 'red', //设置网格的边界颜色
backgroundColor: '#f7f7f7', //设置背景整个网格的颜色
},
title: { //配置标题组件
text: '未来一周气温变化',
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['最高气温', '最低气温']
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }, saveAsImage: { show: true }
}
},
xAxis: [ //配置x轴坐标系
{
show: false, smooth: true,
type: 'category', boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置y轴坐标系
{
show: false, type: 'value',
axisLabel: { formatter: '{value} °C' }
}
],
series: [ //配置数据系列
{
name: '最高气温', smooth: true,
type: 'line', data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: { //设置标记线
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '最低气温', smooth: true,
type: 'line', data: [1, -2, 2, 5, 3, 2, 0],
markPoint: { //设置标记点
data: [
{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
]
},
markLine: { //设置标记线
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.2 图二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-2-直角坐标系坐标轴组件配置示例</title>
<script src="echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据
let option = {
color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['蒸发量', '降水量', '最低气温', '最高气温']
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: { show: true }, dataView: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }, saveAsImage: { show: true }
}
},
xAxis: [ //配置x轴坐标系，数组，代表可以配置多条轴线
{ //指定第一条x轴上的类目数据及格式
type: 'category',
position: 'bottom',
boundaryGap: true,
show: true,
axisLine: { //设置第一条x轴上的轴线
lineStyle: {
color: 'green', type: 'solid', width: 2
}
},
axisTick: { //设置第一条x轴上的轴刻度标记
show: true, length: 10,
lineStyle: {
color: 'red', type: 'solid', width: 2
}
},
axisLabel: { //设置第一条x轴上的轴文本标记
show: true, interval: 'auto',
rotate: 45,
margin: 8,
formatter: '{value}月',
textStyle: {
color: 'blue', fontFamily: 'sans-serif',
fontSize: 15, fontStyle: 'italic', fontWeight: 'bold'
}
},
splitLine: { //设置第一条x轴上的轴分隔线
show: true,
lineStyle: {
color: '#483d8b', type: 'dashed', width: 1
}
},
splitArea: { //设置第一条x轴上的轴分隔区域
show: true,
areaStyle: {
color: ['rgba(144,238,144,0.3)', 'rgba(135,200,250,0.3)']
}
},
data: [
'1', '2', '3', '4', '5',
{ //设置第一条x轴上的轴标签个性化
value: '6',
textStyle: {
color: 'red', fontSize: 30, fontStyle: 'normal',
fontWeight: 'bold'
}
},
'7', '8', '9', '10', '11', '12'
]
},
{ //设置指定第二条x轴上的类目数据
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ //配置y轴组件
{ //指定第一条y轴上的数值型数据及格式
type: 'value',
position: 'left',
boundaryGap: [0, 0.1],
axisLine: { //设置第一条y轴上的轴线
show: true,
lineStyle: {
color: 'red', type: 'dashed', width: 2
}
},
axisTick: { //设置第一条y轴上的轴标记
show: true,
length: 10,
lineStyle: {
color: 'green', type: 'solid', width: 2
}
},
axisLabel: { //设置第一条y轴上的标签
show: true, interval: 'auto',
rotate: -45,
margin: 18,
formatter: '{value} ml',
textStyle: {
color: '#1e90ff', fontFamily: 'verdana',
fontSize: 10, fontStyle: 'normal',
fontWeight: 'bold'
}
},
splitLine: { //设置第一条y轴上的分隔线
show: true,
lineStyle: {
color: '#483d8b', type: 'dotted', width: 2
}
},
splitArea: { //设置第一条y轴上的分隔区域
show: true,
areaStyle: {
color: ['rgba(205,92,92,0.3)', 'rgba(255,215,0,0.3)']
}
}
},
{ //指定第二条y轴上的数值型数据及格式
type: 'value',
splitNumber: 10,
axisLabel: { //设置第二条y轴上的数轴标签
formatter: function (value) {
return value + ' °C'
}
},
splitLine: { //设置第二条y轴上的分隔线
show: false
}
}
],
series: [ //配置数据系列
{ //第一组数据：'蒸发量'
name: '蒸发量', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{ //第二组数据：'降水量'
name: '降水量', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{ //第三组数据：'最低气温'
name: '最低气温', type: 'line',
smooth: true, //设置曲线为平滑
yAxisIndex: 1, //指定这一组数据使用第二条y轴（右边的）
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{ //第四组数据：'最高气温'
name: '最高气温',
smooth: true, //设置曲线为平滑
type: 'line',
yAxisIndex: 1, //指定这一组数据使用在第二条y轴（右边的）
data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.3 图三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-3-标题组件配置示例</title>
<script src="echarts.js"></script>
<script src="../../public/lib/echarts/langZH.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 650px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"), null, {
locale: "ZH"
});
//指定图表的配置项和数据
let mytextStyle = { //定义自己的文本格式变量
color: "blue", //设置文字颜色
fontStyle: "normal", //italic斜体oblique倾斜
fontWeight: "normal", //设置文字粗细bold|bolder|lighter|100|200|300|400...
fontFamily: "黑体", //设置字体系列
fontSize: 14, //设置字体大小
};
//指定图表的配置项和数据
let option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
left: 15, //设置网格左上角的位置
top: 66,
borderColor: '#FA8072', //设置网格的边界颜色
},
title: { //配置标题组件
show: true, //设置标题组件是否显示
text: "未来一周气温变化", //设置主标题
subtext: "折线图", //设置副标题
target: "blank", //'self'当前窗口打开，'blank'新窗口打开
subtarget: "blank", //设置副标题打开链接的窗口
textAlign: "center", //设置文本水平对齐
textBaseline: "top", //设置文本垂直对齐
textStyle: mytextStyle, //设置标题样式
//subtextStyle: mytextStyle, //设置副标题样式
padding: 5, //设置标题内边距
itemGap: 10, //设置主副标题间距
//设置所属图形的Canvas分层，zlevel大的Canvas会放在zlevel小的Canvas的上面
zlevel: 0,
z: 2, //设置所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: "10%", //设置组件离容器左侧的距离，'left'，'center'，'right'，'20%'
top: "10", //设置组件离容器上侧的距离，'top'，'middle'，'bottom'，'20%'
right: "auto", //设置组件离容器右侧的距离，'20%'
bottom: "auto", //设置组件离容器下侧的距离，'20%'
backgroundColor: "yellow", //设置标题背景色
borderColor: "#ccc", //设置边框颜色
borderWidth: 2, //设置边框线宽
shadowColor: "red", //设置阴影颜色
shadowOffsetX: 0, //设置阴影水平方向上的偏移距离
shadowOffsetY: 0, //设置阴影垂直方向上的偏移距离
shadowBlur: 10 //设置阴影的模糊大小
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['最高气温', '最低气温']
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [ //配置x轴坐标系
{
show: false,
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置y轴坐标系
{
show: false,
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [ //配置数据系列
{
name: '最高气温',
smooth: true, type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: { //设置标记点
data: [
{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}
]
},
markLine: { //设置标记线
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '最低气温',
smooth: true,
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: { //设置标记点
data: [{
name: '周最低',
value: -2,
xAxis: 1,
yAxis: -1.5
}]
},
markLine: { //设置标记线
data: [{
type: 'average',
name: '平均值'
}]
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.4 图四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-4-多标题组件配置示例</title>
<script src="echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据
let titles = ['气温变化', '空气质量指数', '金价走势', '股票A走势'];
let dataAll = [ //数据
[[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33],
[14, 9.96], [6, 7.24], [4, 4.26], [12, 10.84], [7, 4.82], [5.0, 5.68]],
[[10, 9.14], [8.0, 8.14], [13, 8.74], [9, 8.77], [11, 9.26], [14.0, 8.1],
[6.0, 6.13], [4.0, 3.10], [12.0, 9.13], [7, 7.26], [5.0, 4.74]],
[[4.0, 4.6], [5.0, 5.7], [6.0, 6.4], [7.0, 8.1], [8.0, 7.1], [9.0, 8.4],
[10.0, 9.8], [11.0, 9.9], [12.0, 8.5], [13.0, 9.2], [15.0, 11.0]],
[[2.0, 2.8], [3.0, 3.6], [4.0, 4.1], [5.0, 5.4], [6.0, 6.7], [7.0, 7.4],
[8.0, 7.5], [9.0, 7.5], [12.0, 9.6], [15.0, 10.1], [18.0, 11.9]]
];
//标记线配置
let markLineOpt = {
animation: false,
lineStyle: {
normal: { type: 'solid' }
},
data: [[{
coord: [0, 3], symbol: 'none' //设置起点或终点的坐标
}, {
coord: [20, 13], symbol: 'none'
}]]
}
let option = {
title: [ //配置标题组件。数组，共配置4个标题，使用方位控制显示位置
{
text: titles[0],
textAlign: 'center',
left: '25%',
top: '1%'
},
{
text: titles[1],
left: '73%',
top: '1%',
textAlign: 'center'
},
{
text: titles[2],
textAlign: 'center',
left: '25%',
top: '50%'
},
{
text: titles[3],
textAlign: 'center',
left: '73%',
top: '50%'
}
],
grid: [ //配置网格组件
{
left: '7%',
top: '7%',
width: '38%',
height: '38%'
}, {
right: '7%',
top: '7%',
width: '38%',
height: '38%'
},
{
left: '7%',
bottom: '7%',
width: '38%',
height: '38%'
}, {
right: '7%',
bottom: '7%',
width: '38%',
height: '38%'
}
],
tooltip: { //配置提示框组件
formatter: 'Group {a}:({c})'
},
xAxis: [ //配置x轴坐标系
{ gridIndex: 0, min: 0, max: 20 },
{ gridIndex: 1, min: 0, max: 20 },
{ gridIndex: 2, min: 0, max: 20 },
{ gridIndex: 3, min: 0, max: 20 }
],
yAxis: [ //配置y轴坐标系
{ gridIndex: 0, min: 0, max: 15 },
{ gridIndex: 1, min: 0, max: 15 },
{ gridIndex: 2, min: 0, max: 15 },
{ gridIndex: 3, min: 0, max: 15 }
],
series: [ //配置数据系列
{ //设置数据系列1
name: 'I',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: dataAll[0],
//markLine:markLineOpt
},
{ //设置数据系列2
name: 'II',
type: 'scatter',
xAxisIndex: 1,
yAxisIndex: 1,
data: dataAll[1], //markLine:markLineOpt
},
{ //设置数据系列3
name: 'III',
type: 'scatter',
xAxisIndex: 2,
yAxisIndex: 2,
data: dataAll[2], //markLine:markLineOpt
},
{ //设置数据系列4
name: 'IV',
type: 'scatter',
xAxisIndex: 3,
yAxisIndex: 3,
data: dataAll[3], //markLine:markLineOpt
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.5 图五
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-6-滚动图例组件配置示例</title>
<script src="echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据
let option = {
color: ['red', 'green', 'blue', 'grey'], //使用自己预定义的颜色
legend: {
type: 'scroll', //设置为滚动图例，type属性默认值为'plain'（普通图例，不滚动）
orient: 'horizontal', //'vertical'
left: 'right', //'center'|'left'|{number},
top: 'top', //'center'|'bottom'|{number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20,
textStyle: {
color: 'red'
},
},
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [ //配置y轴坐标系
{ //设置第1条y轴坐标系
type: 'value',
axisLabel: {
formatter: '{value} ml'
}
},
{ //设置第2条y轴坐标系
type: 'value',
axisLabel: {
formatter: '{value} °C'
},
splitLine: {
show: false
}
}
],
series: [ //配置数据系列，下面故意使用了较长的字符串，以构成长度溢出
{ //设置数据系列1
name: '某一年的蒸发量 ',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{ //设置数据系列2
name: '某一年的降水量 ',
smooth: true,
type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
},
{ //设置数据系列3
name: '某一年的最高气温 ',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{ //设置数据系列4
name: '某一年的最低气温 ',
smooth: true,
type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.6 图六
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-7-工具箱组件配置示例</title>
<script src="echarts.js"></script>
<script src="../../public/lib/echarts/langZH.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"), null, {
locale: "ZH"
});
//指定图表的配置项和数据
let option = {
color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
left: 300,
data: ['最高', '最低']
},
toolbox: { //配置工具箱组件
show: true, //设置是否显示工具箱组件
orient: 'horizontal', //设置布局方式，默认为水平布局，可选:'horizontal'?'vertical'
//设置水平安放位置，默认为右对齐；
//可选:'center'?'left'?'right'?{number}（x坐标，单位px）
left: 'right',
right: 'top',
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', //设置工具箱背景颜色
borderColor: '#ccc', //设置工具箱边框颜色
borderWidth: 0, //设置工具箱边框线宽，单位px,默认为0（无边框）
padding: 5, //设置工具箱内边距，单位px，默认各方向内边距为5
showTitle: true,
feature: {
dataZoom: { //设置数据区域缩放
show: true,
title: {
dataZoom: '区域缩放',
dataZoomReset: '区域缩放-后退'
}
},
dataView: { //设置数据视图
show: true,
title: '数据视图',
readOnly: false,
lang: ['数据视图', '关闭', '刷新'],
optionToContent: function (opt) {
let axisData = opt.xAxis[0].data;
let series = opt.series;
let table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (let i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
},
magicType: { //设置动态类型切换
show: true,
title: { //自定义标题显示，覆盖默认的本地化显示
line: '动态类型切换-折线图',
bar: '动态类型切换-柱状图',
stack: '动态类型切换-堆积',
tiled: '动态类型切换-平铺'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: { //设置数据重置
show: true,
title: '还原',
color: 'black'
},
saveAsImage: { //设置导出图片
show: true,
title: '保存为图片',
type: 'jpeg',
lang: ['单击本地保存']
},
myTool2: {//自定义操作
show: true,
title: '自定义扩展方法',
icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
onclick: function () {
alert('myToolHandler2')
}
}
}
},
dataZoom: { //配置数据区域缩放
show: true,
realtime: true,
start: 20,
end: 80
},
xAxis: [ //配置x轴坐标系
{
type: 'category',
boundaryGap: false,
data: function () {
let list = [];
for (let i = 1; i <= 30; i++) { list.push('2020-03-' + i); }
return list;
}()
}
],
yAxis: [ //配置y轴坐标系
{
type: 'value'
}
],
series: [ //配置数据系列
{ //设置数据系列1，js中的立即执行表达式
name: '最高',
type: 'line',
smooth: true,
data: function () {
let list = [];
for (let i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 30) + 10);
}
return list;
}()
},
{ //设置数据系列2，js中的立即执行表达式
name: '最低',
type: 'line',
smooth: true,
data: function () {
let list = [];
for (let i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 10));
}
return list;
}()
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.7 图七
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-8-详情提示框组件配置示例</title>
<script src="echarts.js"></script>
<script src="../../public/lib/echarts/langZH.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"), null, {
locale: "ZH"
});
//指定图表的配置项和数据
let option = {
tooltip: { //配置详情提示框组件
trigger: 'axis', //配置坐标轴触发，当鼠标滑过坐标轴时触发
axisPointer: { //坐标轴指示器
type: 'shadow',
lineStyle: {
color: '#48b',
width: 2,
type: 'solid'
},
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed'
},
shadowStyle: {
color: 'rgba(150,150,150,0.2)',
width: 'auto',
type: 'default'
}
},
showDelay: 0,
hideDelay: 0,
transitionDuration: 0,
backgroundColor: 'rgba(0,222,0,0.5)',
borderColor: '#f50',
borderRadius: 8,
borderWidth: 2,
padding: 10,
position: function (p) {//位置回调
//console.log && console.log(p);
return [p[0] + 10, p[1] - 10];
},
textStyle: {
color: 'blue',
decoration: 'none',
fontFamily: 'sans-serif',
fontSize: 15,
fontStyle: 'normal',
fontWeight: 'bold'
},
//此函数用于格式化详情提示内容，支持异步调用
formatter: function (params, ticket, callback) {
console.log(params)
let res = '详情提示框: <br/>' + params[0].name;
for (let i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
//延迟300ms后执行
setTimeout(function () {
callback(ticket, res); //仅为了模拟异步回调，callback为formatter的第三个参数
}, 300);
return '正在加载...';//模拟异步回调
}
//formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: { //配置y轴坐标系
type: 'value'
},
series: [ //配置数据系列
{ //设置数据系列1
name: '坐标轴触发1',
type: 'bar',
data: [
{
value: 320,
extra: 'Hello~'
},
332, 301, 334, 390, 330, 320
]
},
{ //设置数据系列2
name: '坐标轴触发2',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 157]
},
{ //设置数据系列3
name: '数据项触发1',
type: 'bar',
tooltip: {
trigger: 'item', //配置第一个堆积柱，由数据项触发详情提示
backgroundColor: 'black',
position: [0, 0], //在最左上角显示
formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
},
stack: '数据项',
data: [
120, 132,
{ //配置第3个数据单独的显示样式和详情提示样式
value: 301,
itemStyle: {
normal: {
color: 'red'
}
},
tooltip: {
backgroundColor: 'blue',
formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
}
},
134, 90,
{
value: 230,
tooltip: {//不触发数据项提示
show: false
}
},
210
]
},
{ //设置数据系列4
name: '数据项触发2',
type: 'bar',
tooltip: {//不触发数据项提示
show: false, //配置所有第2个堆积柱（浅红色）不显示详情提示
trigger: 'item'
},
stack: '数据项',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>8.8 图八
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-9-标记点和标记线组件配置示例</title>
<script src="echarts.js"></script>
<script src="../../public/lib/echarts/langZH.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
let myChart = echarts.init(document.querySelector("#main"));
//指定图表的配置项和数据
let option = {
color: ['green', "red", 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色
title: { //配置标题组件
left: 55,
text: '标记点与标记线实例',
},
toolbox: { //配置工具箱组件
left: 520,
show: true,
feature: {
dataView: { //设置数据视图
show: true
},
restore: {
show: true
},
dataZoom: { //设置区域缩放
show: true
},
magicType: { //设置动态类型切换
show: true,
title: {
line: '动态类型切换-折线图',
bar: '动态类型切换-柱状图'
},
type: ['line', 'bar']
},
saveAsImage: { //保存图片
show: true
}
}
},
tooltip: { //配置工具箱组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['销量']
},
xAxis: { //配置x轴坐标系
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {}, //配置y轴坐标系
series: [{ //配置数据系列
name: '销量',
type: 'bar', //设置柱状图
data: [15, 30, 56, 40, 100, 80],
markPoint: { //设置标记点
data: [{
type: 'max',
name: '最大值',
symbol: 'diamond',
symbolSize: 25,
itemStyle: { //设置标记点的样式
normal: {
color: 'red'
}
},
},
{
type: 'min',
name: '最小值',
symbol: 'arrow',
symbolSize: 20,
itemStyle: { //设置标记点的样式
normal: { color: 'blue' }
},
}]
},
markLine: { //设置标记线
data: [{
type: 'average',
name: '平均值',
itemStyle: //设置标记点的样式
{
normal: {
borderType: 'dotted',
color: 'darkred'
}
},
}],
}
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>有问题请指出，大家一起进步！！！