Hexo

无标签

发布日期: 2023-11-05

更新日期: 2023-11-05

文章字数: 11.3k

阅读时长: 48 分

阅读次数:

前言

以前学习的时候，学了一点Canvas基础，看了一眼Echarts（真的是看了一眼，是干什么的），就没有看过这方面的内容了，没想到我又开始接触了，既然接触了那就好好的学习。
跟着做一段时间的项目（我是打酱油的），然后断断续续的学习Echarts有一段时间了，真正学习大概两周吧，能用一些基本的图形，想了一会儿之后还是输出文档吧，能帮助我梳理知识，又能让我快速复习。
说干咱就干呀，仅作为个人笔记。

Echarts快速入门

Echarts入门很简单，官网就有。

1、引入Echarts.js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

2、准备一个容器，也就是一个盒子（div）这个盒子决定了我们显示在哪个地方，宽高是多少。

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

3、初始化Echarts

// 获取DOM
const echrtsDom = document.getElementById('main');
// 初始化实例
const myChart = echarts.init(echrtsDom);

// 也可以简化成一步
var myChart = echarts.init(document.getElementById('main'));

4、配置项，配置项决定了我们怎么展示图表，图表的样式是什么样的，等等一些功能。

var option = {
  xAxis: {
    type:'category',
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    type:'value'
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

5、将配置项设置给Echarts实例。
```
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
通过这些操作之后，就会出现如下的图表。

当你看到这样的图表的时候，恭喜你，小笨同学，离出师只有最后一步了。

配置解释
xAxis

直角坐标系中的 X 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 X 轴的呈现

yAxis

直角坐标系中的 Y 轴, 如果 type 属性的值为 value ,可以不用设置 data,这个时候，Y 轴就会自动去series下面找数据进行渲染。

series

系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
配置项都是以键值对的形式进行配置的，配置项真的是巨多，真的记不住呀真的记不住，上个链接：https://echarts.apache.org/zh/option.html#title。

柱状图

刚刚我们入门的时候展示出的图表，叫柱状图，我们下面就开始学习一些柱状图的配置。后面的代码，只解释一下 option配置和提供最终代码

柱状图标题

var option = {
	// 标题
	title: {
		show: true, // 是否展示标题
		text: 'ECharts大佬学习之路', // 标题文字
		link: 'http://www.baidu.com', // 点击标题时，跳转的链接。
		left: "center", // 标题到盒子左边的距离
		textStyle: { // 文字样式
			color: 'red' // 颜色
		}
	},
	xAxis: {
		type: "category",
		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {
		type: "value"
	},
	series: [
		{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
		}
	]
};

柱状图标记

我们给其设置标记的时候，需要在series里面进行相关的配置。

最大值/最小值

series: [
	{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20],
		markPoint: { //设置标记
			data: [
				{
					type: 'max', name: '最大值' // 最大值 type 为max
				},
				{
					type: 'min', name: '最小值' // 最小值 type 为min
				}
			]
		}
	}
]

平均值

series: [
	{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20],
		......,
		markLine: { // 设置平均值
			data: [
				{
					type: 'average', name: '平均值' // 平均值 type 为 average 
				}
			]
		}
	}
]

数值显示

series: [
	{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20],
		......,
		label: { 
			show: true, // 数值是否可见
			rotate: 0 // 数值旋转角度
		}
	}
]

设置柱的宽度

series: [
	{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20],
		......,
		barWidth: '30%' // 柱的宽度
	}
]

设置横向柱状图

横向柱状图, 只需要让x轴的角色和y轴的角色互换一下. xAxis 的 type 设置为
value , yAxis 的 type 设置为 category , 并且设置 data 即可。

var option = {
	xAxis: {
		type: "value"
	},
	yAxis: {
		type: "category",
		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	series: [
		{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20],
		}
	]
}

完整的代码

var option = {
	title: {
		show: true,
		text: 'ECharts大佬学习之路',
		link: 'http://www.itcast.cn',
		left: "center",
		textStyle: {
			color: 'red'
		}
	},
	xAxis: {
		type: "value"
	},
	yAxis: {
		type: "category",
		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	series: [
		{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20],
			markPoint: {
				data: [
					{
						type: 'max', name: '最大值'
					},
					{
						type: 'min', name: '最小值'
					}
				]
			},
			markLine: {
				data: [
					{
						type: 'average', name: '平均值'
					}
				]
			},
			label: {
				show: true, // 是否可见
				rotate: 0 // 旋转角度
			},
			barWidth: '30%' // 柱的宽度
		}
	]
};

通用配置

通用配置，即我们在其他的图形之中，也是进行相同的配置，根据设置不同，表现出类似的结果。就是同一个东东。

标题title

var option = {
	title: {
		show: true, // 是否显示标题
		text: "ECharts大佬学习之路", // 标题文字
		textStyle: { // 文字样式
			color: 'red' // 文字颜色
		},
		link: 'http://www.itcast.cn', // 点击标题时，跳转的链接。
		borderWidth: 5, // 标题边框
		borderColor: 'green', // 标题边框颜色
		borderRadius: 5, // 标题边框圆角
		left: 'center', // 标题到盒子左边的距离
		top: 0 // 标题到盒子顶部的距离
	},
}

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框。

触发类型

var option = {
	tooltip: {
		trigger: 'axis', // 可选值有 item\axis 我现在看到的唯一区别就是：item 移入的具体的柱上面才会触发提示，axis 不需要移入到具体的柱上，只需要对应的上方即可显示出来
	},
}

触发时机 `triggerOn`

var option = {
	tooltip: {
		......,
		triggerOn: 'click',// 可选值有 mousemove\click,移入移除/点击 时触发
	},
}

格式化显示: `formatter`

我们提示框显示的时候，想要自定义显示的内容。

字符串模板

var option = {
	tooltip: {
		......,
		formatter: '{b}:{c}'
	}
}
这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

模板变量

图名称	{a}	{b}	{c}	{d}	{e}
折线图	系列名称	数据名称（X轴）	数值（Y轴）	无	无
柱状图	系列名称	数据名称（X轴）	数值（Y轴）	无	无
K线图	系列名称	数据名称（X轴）	数值（Y轴）	无	无
散点图	系列名称	数据名称（X轴）	数值数组（Y轴）	无	无
地图	系列名称	区域名称	合并数值	无	无
饼图	系列名称	数据项名称	数值	无	无
仪表盘	系列名称	数据项名称	数值	无	无
沙漏图	系列名称	数据项名称	数值	无	无

回调函数

这个形式有三个参数。第一个 params。params 是 formatter 需要的数据集，是一个数组。

var option = {
	tooltip: {
		trigger: 'item',
		triggerOn: 'click',
		formatter: function (params) {
			return params[0].name + ':' + params[0].data
		}
	}
}

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefied，表示 dimension index 。
    // 其内容如：
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index，如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,
    // 饼图，漏斗图的百分比
    percent: number
}

工具按钮: toolbox

内置工具

toolbox 是 ECharts 提供的工具栏, 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
工具栏的按钮是配置在 feature 的节点之下

var option = {
	toolbox: {
		feature: {
			saveAsImage: {}, // 将图表保存为图片
			dataView: {}, // 是否显示出原始数据
			restore: {}, // 还原图表
			dataZoom: {}, // 数据缩放
			magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
				type: ['bar', 'line'] // 柱状图 和 折线图之间切换
			},
		}
	}
}

自定义工具

同时 Echarts还提供了自定义工具，需要注意的是，自定义的工具名字，只能以 my 开头，例如 myTool1，myTool2：

var option = {
	toolbox: {
		feature: {
			......,
			myTool1: {
				show: true, // 是否显示
				title: '自定义扩展方法1', // 移入之后提示的内容
				icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',// 展示的图标
				onclick: function () {// 点击的时候触发的函数。
					alert('myToolHandler1')
				}
			},
		}
	}
}

图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用

var option = {
	legend: {
		data: ['销量', '利润'],//数据
		orient: "horizontal",//图例列表的布局朝向 横向 horizontal 竖直 vertical(默认)
	},
	series: [
		{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20],
		},
		{
			name: '利润',
			type: 'bar',
			data: [93, 60, 61, 82, 95, 70]
		}
	]
}

这里会有个问题。
如果只是单个类型的柱状图，那么在formatter中的params是一个数组。
如果只是多个类型的柱状图，那么在formatter中的params是一个对象。
所以自己设置的时候需要注意一下。

折线图

基本使用

<!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>折线图</title>
    <!-- 1.引入echarts -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 2.设置盒子 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 3.初始化实例
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        // 5.配置项
        option = {
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        // 6.将配置设置给Echarts实例
        option && myChart.setOption(option);

    </script>
</body>
</html>

到这里，你已经可以看到折线图了。

常见效果

标记

最大值/最小值 markPoint

var option = {
	series: [
		{
			......,
			markPoint: {
				data: [
					{
						type: 'max',
						name: '最大值'
					}, {
						type: 'min',
						name: '最小值'
					}
				]
			}
		}
	]
}

平均值 markLine

var option = {
	series: [
		{
			......,
			markLine: {
				data: [
					{
						type: 'average',
						name: '平均值'
					}
				]
			}
		}
	]
}

标注区间 markArea

需要注意的是，data中的数据需要和x轴中的值对应，并且不要超出，比如6月到9月之类的，这样的话就会从1月到6月

var option = {
	series: [
		{
			......,
			markArea: {
				data: [
					[
						{
							xAxis: '1月'
						}, {
							xAxis: '2月'
						}
					],
					[
						{
							xAxis: '6月'
						}, {
							xAxis: '7月'
						}
					]
				]
			}
		}
	]
}

线条控制

平滑线条 smooth

var option = {
	series: [
		{
			......,
			smooth: true
		}
	]
}

线条样式 lineStyle

var option = {
	series: [
		{
			......,
			lineStyle: {
				color: 'green',
				type: 'dashed' // 可选值还有 dotted solid
			}
		}
	]
}

填充风格 areaStyle

var option = {
	series: [
		{
			......,
			areaStyle: {
				color: 'pink'
			}
		}
	]
}

紧挨边缘 boundaryGap

经过观察发现，我们的数据并没有从X轴的0坐标开始，如果我们想要设置从0开始，那么就给X轴设置 boundaryGap。

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr,
		boundaryGap: false  // 坐标轴的留白策略
	}
}

官网的配置项中的有句话我们需要知道：类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
简单来说，就是设置了 boundaryGap 为 false数据对应的就是刻度线，为true,那么真实的数据对应的真实值位于两个相邻刻度线的中间。

缩放, 脱离0值比例

如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			type: 'line',
			data: [3005, 3003, 3001, 3002, 3009, 3007, 3003],// 此时y轴的数据都在3000附近, 每个数之间相差不多
		}
	]
}

我们就会发现，咋个变成了一个直线，因此可以配置上 scale , 让其摆脱0值比例

scale 配置

scale 应该配置给 y 轴

var option = {
	yAxis: {
		type: 'value',
		scale: true
	}
}

这时候，你会发现，Y轴的0刻度线，是从3000开始的。

堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加。
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

<!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>折线图</title>
    <!-- 1.引入echarts -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 2.设置盒子 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("#main"))
        var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
        var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
        var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value',
                scale: true
            },
            series: [
                {
                    type: 'line',
                    data: yDataArr1
                },
                {
                    type: 'line',
                    data: yDataArr2
                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>
</html>

说简单点，就是会出现交叉的形式，如果我们不想让其交叉，我们就可以让其堆叠。

var option = {
	series: [
		{
			type: 'line',
			data: yDataArr1,
			stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任
				意写
		},
		{
			type: 'line',
			data: yDataArr2,
			stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意
				写
		}
	]
}

这个时候，我们就会发现，一个折线是在另一个折线的基础上设置的。

散点图

基本实现

<!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>散点图</title>
		<!-- 1.引入Echarts-->
		<script src="echarts.js"></script>
	</head>
	<body>
		<!--2.准备盒子容器 		 -->
		<div id="main" style="width: 1200px; height: 600px;"></div>
		<script>
			// 3.初始化实例
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			// 4.设置配置项
			option = {
				xAxis: {
				},
				yAxis: {
				},
				series: [
					{
						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.2],
							[11.5, 7.2],
							[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'
					}
				]
			};
			// 5.将配置设置给实例
			option && myChart.setOption(option);

		</script>
	</body>
</html>

需要值得注意的一点是，散点图的数据是二维数组

气泡图效果

要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
要实现这样的效果需要使用symbolSize和 itemStyle.color ,这两个配置项都支持固定值的写法, 也支持回调函数的写法

配置方式

var option = {
	series: [
		{
			type: 'scatter',
			data: axisData,
			symbolSize: 25,// 设置散点的大小
			itemStyle: { 
				color: 'green',  // 控制散点的颜色
			}
		}
	]
}

回调函数

var option = {
	series: [
		{
			type: 'scatter',
			data: axisData,
			symbolSize: function (params) { // 设置散点的大小
				if (params[0] > 6) {
					return 25;
				} else {
					return 10;
				}
			},
			itemStyle: {
				color: function (params) { // 控制散点的颜色
					if (params.data[0] > 6) {
						return 'red'
					} else {
						return 'green'
					}
				},
			}
		}
	]
}

涟漪效果

我们在一些大数据的图标上面会发现这种散点的小圆圈可以呈现出涟漪的状态，就像小石头打在水里那样，这就是所说的涟漪效果。最典型的我觉得就是地震的时候，看震源，发出那种波的形式。
我们需要做的是将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果。

基本配置

rippleEffect 可以配置涟漪动画的大小。

var option = {
	series: [
		{
			......,
			type: 'effectScatter',
			rippleEffect:{
				scale:3
			}
		}
	]
}

产生时间

showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis
render 代表界面渲染完成就开始涟漪动画
emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

var option = {
	series: [
		{
			......,
			type: 'effectScatter',
			showEffectOn: 'emphasis',
			rippleEffect:{
				scale:3
			}
		}
	]
}

直角坐标系的常见配置

直角坐标系的常见配置，主要是针对我们常用的柱状图、折线图、散点图，针对直角坐标系的图有一些通用的配置。

网格grid

grid是用来控制直角坐标系的布局和大小, 比如我们要设置背景间隔线，x``y轴。

是否显示网格

var option = {
	grid: {
		show: true, // 是否显示网格(grid)
	}
}

边框宽度

var option = {
	grid: {
		show: true, // 是否显示网格(grid)
		borderWidth: 10, // 网格(grid)的边框宽度
	}
}

网格边框颜色

var option = {
	grid: {
		show: true, // 是否显示网格(grid)
		borderWidth: 10, // 网格(grid)的边框宽度
		borderColor: 'red', // 网格(grid)的边框颜色
	}
}

离容器左侧的距离（left）

当left小于容器盒子的宽度的时候，会将里面的内容进行压缩。比如容器div的宽度是600px,left设置为200px,那么相当于将左边的边框向右推200px，但是整个图像的整体位置没有变，就感觉像是图像被压缩了。
当left等于盒子的大小的时候，那么盒子整体会被向右推到盒子的宽度。比如left等于600px那么就是等于盒子的宽度，那么图像的整体就会被推600px，这个时候不会再压缩图像，就好像图像已经压缩到一种极致，不能在被压缩了，就推600px。
当left大于盒子的宽度的时候，我们会发现右边框不见了，这个时候无论我们left是多少，最终左边边框都是不会再变动了。

var option = {
	grid: {
		show: true, // 是否显示网格(grid)
		borderWidth: 10, // 网格(grid)的边框宽度
		borderColor: 'red', // 网格(grid)的边框颜色
		left: 200, // 离容器左侧的距离。
	}
}

left等于200px

left等于500px

从这里我们就发现，其实右边边框一直没动，只是一直在进行压缩图形。
left等于600px

我们会发现，图形整体向右边走了一段距离。
left等于900px

离容器顶部的距离(top)

top跟left有类似的特点。

var option = {
	grid: {
		show: true, // 是否显示网格(grid)
		borderWidth: 10, // 网格(grid)的边框宽度
		borderColor: 'red', // 网格(grid)的边框颜色
		left: 200, // 离容器左侧的距离。
		top:100,//离顶部的距离
	}
}

容器宽高

当我们不设置宽高的时候，图形默认就是容器的宽高。

坐标轴axis

坐标轴分为x轴和y轴，一个 grid 中最多有两种位置的x轴和 y 轴

坐标轴类型

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr,
	},
	yAxis: {
		type: 'value',
	}
}

value : 数值轴, 自动会从目标数据中读取数据
category : 类目轴, 该类型必须通过 data 设置类目数据

坐标轴的位置

xAxis : 可取值为 top 或者 bottom
yAxis : 可取值为 left 或者 right

xAxis: {
	type: 'category',
		data: xDataArr,
		position: 'bottom'
},
yAxis: {
	type: 'value',
		scale: true,
		position: 'left'
},

区域缩放

dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着可以配置多个区域缩放器。

区域缩放类型

slider : 滑块
inside : 内置, 依靠鼠标滚轮或者双指缩放

var option = {
	dataZoom: [
		{
			type: 'slider',//区域缩放类型
		}
	],
}

产生作用的轴

xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可

var option = {
	dataZoom: [
		{
			type: 'slider',//区域缩放类型
			xAxisIndex: 0
		},
		{
			type: 'inside',
			yAxisIndex: 0,
		}
	],
}

初始状态的缩放情况

var option = {
	dataZoom: [
		{
			type: 'slider',//区域缩放类型
			xAxisIndex: 0,
			start: 10,
			end: 80
		},
		{
			type: 'inside',
			yAxisIndex: 0,
		}
	],
}

饼图

饼图的数据是由 name 和 value组成的字典所形成的数组
饼图无须配置 xAxis 和 yAxis
将类型 type设置为pie。

<!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>饼图</title>
		<script src="echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 1200px; height: 600px;"></div>
		<script>

			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				series: [
					{
						type: 'pie',
						data: [
							{ value: 1048, name: '衣服' },
							{ value: 735, name: '裤子' },
							{ value: 580, name: '内衣' },
							{ value: 484, name: '鞋子' },
							{ value: 300, name: '帽子' }
						],
					}
				]
			};

			option && myChart.setOption(option);

		</script>
	</body>
</html>

饼图的常见效果

显示数值 label

显示文字

option = {
	series: [
		{
			type: 'pie',
			data: [
				{ value: 1048, name: '衣服' },
				{ value: 735, name: '裤子' },
				{ value: 580, name: '内衣' },
				{ value: 484, name: '鞋子' },
				{ value: 300, name: '帽子' }
			],
			label: {
				show: true, //圆周围的那一圈文字，默认就是显示的
			}
		}
	]
};

格式化文字

有两种形式，字符串和回调函数的形式。

option = {
	series: [
		{
			type: 'pie',
			data: [
				{ value: 1048, name: '衣服' },
				{ value: 735, name: '裤子' },
				{ value: 580, name: '内衣' },
				{ value: 484, name: '鞋子' },
				{ value: 300, name: '帽子' }
			],
			label: {
				show: true, //圆周围的那一圈文字，默认就是显示的
				formatter: function (params) {
					console.log(params);
					return params.data.name + '平台' + params.data.value + '元\n' +
						params.percent + '%'
				}
			}
		}
	]
};

南丁格尔图

南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大，只需要将roseType: 'radius'

option = {
	series: [
		{
			type: 'pie',
			data: [
				{ value: 1048, name: '衣服' },
				{ value: 735, name: '裤子' },
				{ value: 580, name: '内衣' },
				{ value: 484, name: '鞋子' },
				{ value: 300, name: '帽子' }
			],
			label: {
				show: true,
				formatter: function (params) {
					return params.data.name + '平台' + params.data.value + '元\n' +
						params.percent + '%'
				},
			},
			roseType: 'radius', //设置就会出现南丁格尔图
		}
	]
};

选中效果

选中模式

selectedMode: 'multiple'
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可
选 'single' ,'multiple'，分别表示单选还是多选

option = {
	series: [
		{
			......,
			selectedMode: 'multiple', // 多选
		}
	]
};

偏移距离

选中扇形部分向外的偏移。

option = {
	series: [
		{
			......,
			selectedMode: 'multiple', // 多选
			selectedOffset: 30,// 偏移距离
		}
	]
};

圆环

饼图的半径radius。可以为如下类型：
number ：直接指定外半径值。
string ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
Array ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以
将饼图设置为圆环图

option = {
	series: [
		{
			......,
			selectedMode: 'multiple', // 多选
			selectedOffset: 30,// 偏移距离
			radius: ['50%', '70%'],//圆环半径
		}
	]
};

地图

地图的实现，需要矢量地图数据，地图的数据在[https://datav.aliyun.com/portal/school/atlas/area_selector](https://datav.aliyun.com/portal/school/atlas/area_selector)这个地址里面可以下载出来相关的数据。

基本实现

<!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>地图</title>
		<!-- 1.引入Echarts和jquery -->
		<script src="./echarts.js"></script>
		<script src="./jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<!-- 2.ECharts最基本的代码结构 -->
		<div id="main" style="width: 1200px; height: 600px;"></div>
		<script>
			
			//3.初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//4．使用Ajax获取矢量地图数据
			$.ajax('./china.json').then((res) => {
				//5．在Ajax的回调函数中注册地图矢量数据echarts.registerMap( ' chinaMap'，矢量地图数据)
				echarts.registerMap('chinaMap', res)
				//6．配置geo的type为'map ' , map为'chinaMap'
				let option = {
					geo: {
						type: 'map',
						map: "chinaMap",
					}
				}

				//7.使用制定的配置项和数据显示图表
				myChart.setOption(option);

			})
		</script>
	</body>
</html>

缩放拖动

var option = {
	geo: {
		type: 'map',// map是一个固定的值
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
		roam: true, // 运行使用鼠标进行拖动和缩放
	}
}

名称显示

var option = {
	geo: {
		type: 'map',// map是一个固定的值
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
		roam: true,
		label: {
			show: true
		}
	}
}

初始缩放比例

var option = {
	geo: {
		type: 'map',// map是一个固定的值
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
		roam: true,
		label: {
			show: true
		},
		zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小
	}
}

地图的中心

var option = {
	geo: {
		type: 'map',// map是一个固定的值
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
		roam: true,// 运行使用鼠标进行拖动和缩放
		label: {
			show: true // 显示文字
		},
		zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小
		center: [87.617733, 43.792818] // 当前视角的中心点，用经纬度表示，当前设置为新疆是地图的中心点。
	}
}

常见效果

显示某个区域的地图

跟显示中国地图是相同的，只是地图数据不同而已。

不同城市显示不同颜色

1、显示基本的中国地图

<!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>地图</title>
		<!-- 1.引入Echarts和jquery -->
		<script src="./echarts.js"></script>
		<script src="./jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<!-- 2.ECharts最基本的代码结构 -->
		<div id="main" style="width: 1200px; height: 600px;"></div>
		<script>

			//3.初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//4．使用Ajax获取矢量地图数据
			$.ajax('./china.json').then((res) => {
				//5．在Ajax的回调函数中注册地图矢量数据echarts.registerMap( ' chinaMap'，矢量地图数据)
				echarts.registerMap('chinaMap', res)
				//6．配置geo的type为'map ' , map为'chinaMap'
				let option = {
					geo: {
						type: 'map',
						map: "chinaMap",
						roam: true,//缩放
						label: {
							show: true,//显示文字
						}
					},
				}

				//7.使用制定的配置项和数据显示图表
				myChart.setOption(option);

			})
		</script>
	</body>
</html>

2、准备数据，我准备的是疫情数据

const confirmedCount = [
	{
		"name": "安徽省",
		"provinceCode": "AH",
		"value": 1572
	},
	{
		"name": "澳门特别行政区",
		"provinceCode": "AM",
		"value": 796
		},
		{
		"name": "北京市",
		"provinceCode": "BJ",
		"value": 7922
		},
		{
		"name": "重庆市",
		"provinceCode": "CQ",
		"value": 4551
		},
		{
		"name": "福建省",
		"provinceCode": "FJ",
		"value": 5736
		},
		{
		"name": "广东省",
		"provinceCode": "GD",
		"value": 28216
		},
		{
		"name": "甘肃省",
		"provinceCode": "GS",
		"value": 1523
		},
		{
		"name": "广西壮族自治区",
		"provinceCode": "GX",
		"value": 2364
		},
		{
		"name": "贵州省",
		"provinceCode": "GZ",
		"value": 1136
		},
		{
		"name": "湖北省",
		"provinceCode": "HB",
		"value": 68511
		},
		{
		"name": "河北省",
		"provinceCode": "HB-1",
		"value": 2182
		},
		{
		"name": "黑龙江省",
		"provinceCode": "HLJ",
		"value": 3904
		},
		{
		"name": "湖南省",
		"provinceCode": "HN",
		"value": 1932
		},
		{
		"name": "河南省",
		"provinceCode": "HN-1",
		"value": 6328
		},
		{
		"name": "海南省",
		"provinceCode": "HN-2",
		"value": 9030
		},
		{
		"name": "吉林省",
		"provinceCode": "JL",
		"value": 40356
		},
		{
		"name": "江苏省",
		"provinceCode": "JS",
		"value": 3226
		},
		{
		"name": "江西省",
		"provinceCode": "JX",
		"value": 1513
		},
		{
		"name": "辽宁省",
		"provinceCode": "LN",
		"value": 2219
		},
		{
		"name": "内蒙古自治区",
		"provinceCode": "NMG",
		"value": 6956
		},
		{
		"name": "宁夏回族自治区",
		"provinceCode": "NX",
		"value": 227
		},
		{
		"name": "青海省",
		"provinceCode": "QH",
		"value": 383
		},
		{
		"name": "四川省",
		"provinceCode": "SC",
		"value": 8363
		},
		{
		"name": "山东省",
		"provinceCode": "SD",
		"value": 3502
		},
		{
		"name": "上海市",
		"provinceCode": "SH",
		"value": 64435
		},
		{
		"name": "陕西省",
		"provinceCode": "SX",
		"value": 4749
		},
		{
		"name": "山西省",
		"provinceCode": "SX-1",
		"value": 2873
		},
		{
		"name": "天津市",
		"provinceCode": "TJ",
		"value": 2578
		},
		{
		"name": "台湾省",
		"provinceCode": "TW",
		"value": 8210955
		},
		{
		"name": "香港特别行政区",
		"provinceCode": "XG",
		"value": 452483
		},
		{
		"name": "新疆维吾尔自治区",
		"provinceCode": "XJ",
		"value": 2414
		},
		{
		"name": "西藏自治区",
		"provinceCode": "XZ",
		"value": 1498
		},
		{
		"name": "云南省",
		"provinceCode": "YN",
		"value": 3430
		},
		{
		"name": "浙江省",
		"provinceCode": "ZJ",
		"value": 3889
		}
		]

3、将 series 下的数据和 geo 关联起来

var option = {
	series: [
		{
			type: 'map',
			data: confirmedCount,
			geoIndex: 0,
		}
	]
}

4、结合 visualMap 配合使用
visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过 dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

var option = {
	visualMap: {
		min: 0, // 最小值
		max: 8000, // 最大值
		inRange: {
			color: ['white', 'red'] // 颜色的范围
		},
		calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
	}
}

地图和散点图结合

1、准备一个新的数据，该数据为散点数据

const scatterData = [
	{
		value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度
	}
]

2、在series这个数组下增加新的对象
3、将 type设置为effectScatter
4、将散点图使用地图的坐标系统
5、增强涟漪效果

series: [
	// 地图数据
	{
		type: 'map',
		data: confirmedCount,
		geoIndex: 0,
	},
	// 散点数据
	{
		type: 'effectScatter', // 3
		data: scatterData,
		coordinateSystem: 'geo', //4、 这里设置为地图，跟地图绑定
		geoIndex: 0,
		rippleEffect: {
			scale: 10  // 5、增强涟漪的状态
		},
		itemStyle: {
			color: 'green'  // 控制散点的颜色
		}
	}
],

雷达图

基本实现

<!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>雷达图</title>
		<!--1.引入Echarts和jquery 		 -->
		<script src="./echarts.js"></script>
		<script src="./jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<!--2.准备容器盒子-->
		<div id="main" style="width: 1000px; height: 600px;"></div>

		<script>
			// 3.初始化实例
			const chartDom = document.querySelector('#main');
			const myChart = echarts.init(chartDom);
			var option;
			// 4.准备数据
			const = indicatorData  = [
						// name 就是每个点的名称 max 是每个点的最大值 color 设置name 的颜色
						{ name: '衣服', max: 6500 },
						{ name: '裤子', max: 16000 },
						{ name: '鞋子', max: 30000 },
						{ name: '帽子', max: 38000 },
						{ name: '手套', max: 52000 },
						{ name: '耳罩', max: 25000 }
					]

			option = {
				//5.雷达图坐标系组 也就是背景的圈
				radar: {
					// 雷达图的指示器，用来指定雷达图中的多个变量（维度
					indicator: indicatorData
				},
				series: [
					{
						// 6.图中的两圈线
						type: 'radar',
						data: [
							{
								value: [4200, 3000, 20000, 35000, 50000, 18000],
								name: '阿迪达斯'
							},
							{
								value: [5000, 14000, 28000, 26000, 42000, 21000],
								name: '鸿星尔克'
							}
						]
					}
				]
			};

			option && myChart.setOption(option);

		</script>
	</body>
</html>

雷达图效果

显示数值

option = {
	series: [
		{
			type: 'radar',
			label: {
				show: true
			},
			data: [
				{
					value: [4200, 3000, 20000, 35000, 50000, 18000],
					name: '阿迪达斯'
				},
				{
					value: [5000, 14000, 28000, 26000, 42000, 21000],
					name: '鸿星尔克'
				}
			]
		}
	]
};

区域面积 areaStyle

option = {
	series: [
		{
			type: 'radar',
			label: {
				show: true // 显示数值
			},
			areaStyle: {}, // 区域填充的样式
			data: [
				{
					value: [4200, 3000, 20000, 35000, 50000, 18000],
					name: '阿迪达斯'
				},
				{
					value: [5000, 14000, 28000, 26000, 42000, 21000],
					name: '鸿星尔克'
				}
			]
		}
	]
};

绘制背景图形

雷达背景图有两种形状，一种是polygon多边形，一种是circle圆形。

option = {
	radar: {
		shape: 'circle', // 背景图为圆形
		indicator: indicatorData
	},
	series: [
		{
			type: 'radar',
			label: {
				show: true // 显示数值
			},
			areaStyle: {}, // 区域填充的样式
			data: [
				{
					value: [4200, 3000, 20000, 35000, 50000, 18000],
					name: '阿迪达斯'
				},
				{
					value: [5000, 14000, 28000, 26000, 42000, 21000],
					name: '鸿星尔克'
				}
			]
		}
	]
};

仪表盘图

基本实现

<!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>仪表盘</title>
  </head>
  <body>
		<!-- 1.准备盒子     -->
    <div id="main" style="width: 1200px; height: 600px;"></div>
		<!-- 2.引入echarts     -->
    <script src="echarts.js"></script>
    <script>
    	//3.初始化实例
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
    	// 4.准备配置
      option = {
        series: [
          {
            type: 'gauge',// 类型为 gauge
            data: [
              {
                value: 50,
              }
            ]
          }
        ]
      };
    	// 5.将配置设置给实例
      option && myChart.setOption(option);

    </script>
  </body>
</html>

常见效果

数值范围

仪表盘的刻度范围，最大值和最小值

option = {
  series: [
    {
      type: 'gauge',// 类型为 gauge
      data: [
        {
          value: 50,
        }
      ],
      min:20,
      max:90
    }
  ]
};

多个指针和不同颜色

option = {
  series: [
    {
      type: 'gauge',
      data: [ // 在data中设置多个值
        {
          value: 50,
          itemStyle:{ // 每个指针设置不同的颜色
            color:'pink'
          }
        },
        {
          value:85,
          itemStyle:{
            color:'purple'
          }
        }
      ],
      min:20,
      max:90
    }
  ]
};

K线图

关系图

在目前所处的项目中使用到了关系图，来描述两者之间的关系。

基本实现

设置type为 graph，同时还要设置图的布局

none不采用任何布局，使用x,y作为节点的位置
‘circular’ 采用环形布局

‘force’ 采用力引导布局

<!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>关系图</title>
		<!--1.引入echarts -->
		<script src="./echarts.js"></script>
	</head>
	<body>
		<!--2.准备盒子 -->
		<div id="main" style="width: 500px; height: 600px;"></div>
		<script>
			// 3.准备数据
			const data = {
				nodes: [
					{
						name: "老大",
						value: 1,
						category: 4
					},
					{
						name: "老二",
						value: 1,
						category: 4
					},
					{
						name: "老三",
						value: 1,
						category: 4
					}
				],
				links: [
					{
						source: 0,
						target: 1,

					},
					{
						source: 0,
						target: 2,
					},
				]
			}
			// 4.初始化实例
			var myChart = echarts.init(document.getElementById('main'));
			option = {
				series: [
					{
						type: 'graph', 
						layout: 'force', // 设置图的布局
						data: data[0].nodes.map(function (node, idx) {
							node.id = idx;
							return node;
						}),
						edges: data[0].links // 节点间的关系数据
					}
				]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

好的，我们将关系图弄出来了。

常用的配置

显示名称

let option = {
	series:[
		{
			......,
			label:{
				show:true, // 显示名称
				fontSize: 20,// 字体大小
				position: 'right',
				formatter: '{b}',
			}
		}
	]
}

改变节点的大小

然后我们发现，字体有了，但是节点是不是太小了，所以我们需要symbolSize设置节点大小。

let option = {
	series:[
		{
			......,
			symbolSize: 50,// 改变节点的大小
		}
	]
}

改变节点间距

然后我们发现节点之间太挤了，我们需要设置一些参数，让其相互之间有排斥。

let option = {
	series:[
		{
			......,
			force: {
				edgeLength: 100, // 相同边的两个节点之间的距离
				repulsion: 2000, //节点之间的斥力因子。
				gravity: 0.5,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
			},
		}
	]
}

拖拽

我们想要拖拽节点乱动的话，整点花里胡哨的活儿。我们可以设置draggable

let option = {
	series:[
		{
			......,
			draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
		}
	]
}

显示箭头

我们需要给edges

let option = {
	series:[
		{
			......,
			edges:[
				{
					source: 0,
					target: 1,

				},
				{
					source: 0,
					target: 2,
					symbol: ['none', 'arrow']//箭头
				},
			]
		}
	]
}

线段上显示值

线段上显示值，这个值是跟nodes中每个对象的value是有关的。

let option = {
	series:[
		{
			......,
			edgeLabel: { 
				show: true,// 是否显示线条上的文字
				fontSize: 20, //文字大小
				color: 'red', // 文字颜色
				formatter: function (x) { // 自定义显示文字
					// console.log(x);
				}
			},
		}
	]
}

K线图

K线图我目前没有真正的在业务开发场景中使用过，按照文档的配置学习和修改。

标题title

text

标题的文字，主标题。

left

距离左边容器的距离。可以设置具体的px、百分比、英文（center、left、bottom、top）

提示框tooltip

触发类型 trigger

在什么样的图形中触发

axisPointer

坐标轴指示器配置项。也就是你鼠标进入图形的的时候，鼠标头出现的样式。

type

指示器类型。

‘line’ 直线指示器
‘shadow’ 阴影指示器
‘none’ 无指示器
‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

legend

图例组件，图例组件展现了不同系列的标记，颜色和名字，我们可以通过点击图例来控制那些系列不显示。

也就是图中的上面圈中的部分。

数据data

图列的数据数组，这里的话我是用的是字符串

legend: {
	data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
},

但是有时候，我们可以使用对象的形式设置，这样的话，我们可以给每个单独项设置单一的样式。

data: [{
	name: '系列1',
	// 强制设置图形为圆。
	icon: 'circle',
	// 设置文本为红色
	textStyle: {
		color: 'red'
	}
}]

辅助工具toolbox

我们可以在右上角看到一些辅助的工具栏目

工具配置项feature

区域缩放dataZoom

feature: {
	//数据区域缩放。
	dataZoom: {
		yAxisIndex: false //不控制任何y轴
	},
}

选项框的控制按钮 brush

feature: {
	//数据区域缩放。
	dataZoom: {
		yAxisIndex: false //不控制任何y轴
	},
	brush: {
		type: [
			'lineX',// 开启横向选择功能
			'clear',// 清空所有选框
			'keep',//切换成单选或者是多选。多选可以选择多个选择框，单选点击未选中区域可以清除所有选择框。
		]
	}
}

区域选择性工具brush

可以使用该工具选择一个四边形或者多边形选择区域。从而让我们可以选择一部分的数据，便于向用户进行展示被选中的数据。

xAxisIndex

表示那些 xAxisIndex 可以被刷选

brushLink

不同的系列之间，选中的部分可以联动

outOfBrush

选中范围外的视觉元素

outOfBrush: {
	//选中范围外的视觉元素
	colorAlpha: 0.1 //  图元的颜色的透明度。
}

配置部分

brush: {
	xAxisIndex: 'all',// 表示那些 xAxisIndex  可以被刷选
		brushLink: 'all', // 不同的系列之间，选中的部分可以联动
		outOfBrush: {
		//选中范围外的视觉元素
		colorAlpha: 0.1 //  图元的颜色的透明度。
	}
},

直角坐标系内绘制网格grid

grid: {
	left: '10%',
	right: '10%',
	bottom: '15%'
},

直角坐标系的X轴 xAxis

坐标轴两边留白策略 boundaryGap

坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
简单来说就是值会不会对准刻度，当为true的时候，不会对准刻度线，当为false的时候，会对准刻度线。

/**
* 1.boundaryGap：
* 
* 
* 2.axisLine
* 2.1 onZero X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。 
* 
* 3.splitLine 
* 3.1 show  是否显示分隔线。默认数值轴显示，类目轴不显示。 也就是背景的的网格是否显示
* 
* 4.max 坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
* 
* 5.min 坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
*/

坐标轴轴线相关设置 axisLine

onZero

X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
也就是说是否从0开始显示，但是X轴和Y轴，至少有一个轴是包含0刻度线的。

坐标轴在 grid 区域中的分隔线 splitLine

show

是否显示分隔线。默认数值轴显示，类目轴不显示。也就是背景的的网格是否显示

max 坐标轴刻度最大值

可以设置成特殊值 ‘dataMax’，此时取数据在该轴上的最大值作为最大刻度。

min 坐标轴刻度最小值

坐标轴刻度最小值。可以设置成特殊值 ‘dataMin’，此时取数据在该轴上的最小值作为最小刻度。
部分配置：

xAxis: {
  type: 'category',
  data: data0.categoryData,
  boundaryGap: false,
  axisLine: { onZero: false },
  splitLine: { show: false },
  min: 'dataMin',
  max: 'dataMax'
},

直角坐标系的Y轴 yAxis

scale 是否包含0刻度线

只在数值轴中（type: ‘value’）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
如果为false会强制包含0刻度线，如果为true不会强制包含0刻度线。

splitArea 显示分隔区域

是否显示分隔区域。也就是说是否显示成斑马线的格式
部分配置：

yAxis: {
  scale: true,
    splitArea: {
    show: true
  }
},

图形缩放 dataZoom

图形的缩放有两种方式，一种就是鼠标滚轮的缩放，另一种就是图形下部有个滑块，可以控制缩放。

配置:

dataZoom: [
  {
    type: 'inside',
    start: 50, // 数据窗口范围的起始百分比。
    end: 100 // 数据窗口范围的结束百分比。
  },
  {
    show: true, // 是否显示 组件。
    type: 'slider', //滑动条型数据区域缩放组件提供了数据缩略图显示，缩放，刷选，拖拽，点击快速定位等数据筛选的功能。 
    top: '90%', // 距离顶部的距离
    start: 50,
    end: 100,
    brushSelect: true,// 是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。
  }
],

series 系列列表

系列列表，每个系列可以通过type决定自己的图标类型

名称 name

图表的类型 type

图表的数据 data

图表中数据的样式 itemStyle

itemStyle: {
  color: upColor, // 阳线（上涨）
    color0: downColor, // 阴线 （下降）
    borderColor: upBorderColor, // 阳线图形的描边颜色
    borderColor0: downBorderColor // 阴线图形的描边颜色
},

图表标注 markPoint（最大值、最小值）

markPoint: {
  label: {
    formatter: function (param) {
      // console.log(param);
      return param != null ? Math.round(param.value) + '' : '';
    }
  },
  data: [
    {
      name: 'Mark',
      coord: ['2013/5/31', 2300], // [x值，y值]
      value: 2300,
      itemStyle: {
        color: 'rgb(41,60,85)'
      }
    },
    {
      name: 'highest value',
      type: 'max',
      valueDim: 'highest' // [open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）
    },
    {
      name: 'lowest value',
      type: 'min',
      valueDim: 'lowest' // [open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）
    },
    {
      name: 'average value on close',
      type: 'average',
      valueDim: 'close' // [open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）
    }
  ],
  tooltip: {
    formatter: function (param) {
      console.log(param);
      return param.name + '<br>' + (param.data.coord || '');
    }
  }
},

两点之间的连线 markLine

标记的样式 symbol

数据 data

1、当为数组的时候，代表数据中任意两个点之间的距离。
2、当为对象的时候，一般设置平均线，最大值线，最小值线，才会设置。

markLine: {
  symbol: ['none', 'none'], // 起点标记的图形。
    data: [
    [
      {
        name: 'from lowest to highest',
        type: 'min',
        valueDim: 'lowest', // 标注点的值
        symbol: 'circle', // 标注点样式
        symbolSize: 10, // 标注点的大小
        label: { //显示最小值具体的值
          // show: true
          show: false
        },
        emphasis: { // 高亮状态的扇区和标签样式。
          label: {
            show: true
          }
        }
      },
      {
        type: 'max',
        valueDim: 'highest',
        symbol: 'circle',
        symbolSize: 10,
        label: {
          show: false
          // show: true
        },
        emphasis: {
          label: {
            show: true
          }
        }
      }
    ],
    {
      name: 'min line on close',
      type: 'min',
      valueDim: 'close'
    },
    {
      name: 'max line on close',
      type: 'max',
      valueDim: 'close'
    }
  ]
}

盒须图

盒须图，箱线图、箱形图。
主要作用有两个：
1、显示数据分布特征；
2、识别数据异常值。
最大特点是，不受异常值影响，能准确、稳定地描述数据的离散分布情况，同时也利于对数据进行清洗（异常值识别）。
一个典型的盒须图，需包含以下几部分内容：

要理解盒须图，必须理解什么是四分位数。比较标准的解释是：
一组数据按照从小到大顺序排列后，把该组数据四等分的数，称为四分位数。第一四分位数 (Q1)、第二四分位数 (Q2，也叫“中位数”)和第三四分位数 (Q3)分别等于该样本中所有数值由小到大排列后第25%、第50%和第75%的数字。第三四分位数与第一四分位数的差距又称四分位距（interquartile range, IQR）。
举个例子，以学生成绩为例，上四分位数表示成绩排名前1/4的学生，中位数表示排名中间的学生，下四分位数表示成绩排名后1/4的学生。我构造了三个班级的学生成绩，用于分析不同班级学生的成绩分布，过程如下：

最终结果：

从盒须图明显可以看出：1、一班成绩整体好于二班、三班，75%的学生成绩高于80分，最高成绩满分，但出现了异常值，成绩没过60分，不符合一班的实际情况；
2、二班成绩整体最差，75%的学生成绩低于80分；
3、三班成绩良莠不齐，跨度最大，有将近50%的学生可以跟一班看齐，也有50%的成绩较差。

实现简答的盒须图

option = {
  title: [
    {
      text: '盒须图',
      left: 'center'
    }
  ],
  xAxis: {
    type: "category"
  },
  yAxis: {
    type: "value"
  },
  dataset: [
    {
      source: [
        [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
        [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
        [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
        [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
        [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
      ]
    },
    {
      transform: {
        type: 'boxplot',
        config: { itemNameFormatter: 'expr {value}' }
      }
    },
  ],
  series: [
    {
      name: 'boxplot',
      type: 'boxplot',
      datasetIndex: 1
    },
    {
      name: 'outlier',
      type: 'scatter',
      datasetIndex: 2
    }
  ]
}

标题 title

标题文字 text

距离左侧位置 left

距离顶部的位置 top

边框颜色 borderColor

边框宽度 borderWidth

边框样式 textStyle

title: [
  {
    text: 'Michelson-Morley Experiment',
    left: 'center'
  },
  {
    text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
    borderColor: '#999', // 
    borderWidth: 1,
    textStyle: {
      fontWeight: 'normal',
      fontSize: 14,
      lineHeight: 20
    },
    left: '10%',
    top: '90%'
  }
],

数据集 dataset

数据集（dataset）是专门用来管理数据的组件。从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。这样的话，数据可以被多个组件复用，方便进行数据和其他配置分离的配置风格。

数据转换 transform

触发类型 trigger

在什么样的图形中触发

axisPointer

坐标轴指示器配置项。也就是你鼠标进入图形的的时候，鼠标头出现的样式。

type

指示器类型。

‘line’ 直线指示器
‘shadow’ 阴影指示器
‘none’ 无指示器
‘cross’ 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

网格 grid

X轴 xAxis

xAxis: {
  type: 'category',
    name: "盒须图",
    boundaryGap: true,
    // boundaryGap: false,
    nameGap: 30000,
    splitArea: { // 竖着的分隔线
    show: false
  },
  splitLine: { // 横着的分隔线
    show: false
  }
},

Y轴 yAxis

yAxis: {
  type: 'value',
    name: 'km/s minus 299,000',
    splitArea: {
    show: true
  }
},

系列列表 series

series: [
  {
    name: 'boxplot',
    type: 'boxplot',
    datasetIndex: 1
  },
  {
    name: 'outlier',
    type: 'scatter',
    datasetIndex: 2
  }
]

备注

1、文章的最后还有一些没有整理，后续会继续整理，同时这个仅作为个人笔记，后面有新内容会继续填充进来。
2、后面的话，可能会找综合项目来做做，等找到了我会一并挂上链接上来。

小笨

https://forever0714yuan.github.io/2023/11/05/echarts-cheng-shen-zhi-lu/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源小笨 !

无标签

本篇

2023-11-05 小笨

前言

Echarts快速入门

配置解释

柱状图

柱状图标题

柱状图标记

最大值/最小值

平均值

数值显示

设置柱的宽度

设置横向柱状图

完整的代码

通用配置

标题title

提示框: tooltip

触发类型

触发时机 triggerOn

格式化显示: formatter

字符串模板

回调函数

工具按钮: toolbox

内置工具

自定义工具

图例: legend

折线图

基本使用

常见效果

标记

最大值/最小值 markPoint

平均值 markLine

标注区间 markArea

线条控制

平滑线条 smooth

线条样式 lineStyle

填充风格 areaStyle

紧挨边缘 boundaryGap

缩放, 脱离0值比例

如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

scale 配置

堆叠图

散点图

基本实现

气泡图效果

配置方式

回调函数

涟漪效果

基本配置

产生时间

直角坐标系的常见配置

网格grid

是否显示网格

边框宽度

网格边框颜色

离容器左侧的距离（left）

离容器顶部的距离(top)

容器宽高

坐标轴axis

坐标轴类型

坐标轴的位置

区域缩放

区域缩放类型

产生作用的轴

初始状态的缩放情况

饼图

饼图的常见效果

显示数值 label

显示文字

格式化文字

南丁格尔图

选中效果

选中模式

偏移距离

圆环

地图

基本实现

缩放拖动

名称显示

初始缩放比例

地图的中心

常见效果

触发时机 `triggerOn`

格式化显示: `formatter`