文章目录
前言
主要是掌握基础语法和四个基本图表以及对数据的动态更新
考题形式：
要用好官网，看api和实例。Echarts
实际开发中肯定就是拿到官网的代码进行修改了
我现在发现蓝桥杯还是要学一学他官网的内容，因为有些东西你内容掌握了，但是你可能蓝桥杯的题目没读懂，没有适应它的考察方式，最后拿不到高分就得不偿失。
在虚拟环境中无法装扩展，我想是不是可以到时候考试的时候拷到本地来写，这样就有扩展可以快一些
学习 ECharts 的方法
1.你要确定好你想绘制图表的效果；
2.在官网找到类似的图，在所给代码的基础上加以修改；
3.需要添加什么属性，可以再去配置项库中查找；
4.如果是从未接触过的配置项，建议在网上搜索，一般会找到答案。
快速上手
实现流程：
1.准备一个DOM元素作为ECharts的容器
2.基于DOM元素创建一个ECharts实例 echarts.init（）
3.指定配置项和数据 option（从名字就可以看出是配置选项）
4.最后一步千万别忘了 ，将配置项设置给 echarts 实例对象。 instance.setOption（option）
<body>
<!-- 为 ECharts 准备一个宽为 600px，高为 400px 的 DOM -->
<div id="main" style="width:600px;height:400px;"></div>
</body>
<script>
var chartDom = document.getElementById("main");
// 初始化实例对象 echarts.init(dom) 容器;
var myChart = echarts.init(chartDom);
// 指定配置项和数据
var 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",
},
],
};
// 将配置项设置给 echarts 实例对象。 别忘了这一步
myChart.setOption(option);
</script>
</html>
最后的实现效果
基础知识
一个网页中可以创建多个 ECharts 实例。每个 ECharts 实例中可以创建多个图表和坐标系等等（多个series）。准备一个 DOM 节点（作为 ECharts 的渲染容器），就可以在上面创建一个 ECharts 实例。每个 ECharts 实例独占一个 DOM 节点。
option 配置选项
我觉得用配置选项来描述它更为合适，进行一系列的配置，例如坐标轴和展示类型等等。
用一张图来理解：
xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）
visualMap（视觉映射组件）、tooltip（提示框组件）
toolbox（工具栏组件）、series（系列数据）、legend（图例组件）
可选配置
title 标题组件
title 标题 { }，text是内容，show是显示
tooltip 提示框组件
tooltip 提示框组件。
tooltip:{
trigger: 'item' }
触发类型。
'item'
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis'
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
'none'
什么都不触发。
axisPointer 坐标轴指示器
坐标轴指示器是指示坐标轴当前刻度的工具，需要在tooltip里搭配使用
也就是说里面包含的属性都是与坐标轴的设置相关。
type选项：
包含 line（直线指示器）、shadow（阴影指示器）、none（无指示器）、cross（十字准星指示器）这四种类型。
一般来说shadow和cross比较常用，cross可以显示股票那种效果。
tooltip.axisPointer.crossStyle.color 用于设置线的颜色。
tooltip：{
type:"axis",
axisPointer: {
type: "cross",//会有两根相交线
}
}
legend 图例组件
在样式上可以有很多配置
例：
orient："vertical" 就是竖直
left："left" 组件就在左边，同理可得上下左右
itemWidth 和 itemHeight 分别是图例的宽度和高度，图例就是item
但是一般使用就只需要写 legend: {}, 就会显示对应的图例，这些名字是在series的name里定义。
但是还有一种写法就是写个data：[ ],把series里面的数据名字都写进去
toolbox 工具栏
内置有导出图片（saveAsImage）、数据视图（dataView）、动态类型切换（magicType）、数据区域缩放（dataZoom）、重置（restore）等五个工具。
只要feature里写上就可以了
toolbox: {
feature: {
saveAsImage: {
}
}
},
导出图片（saveAsImage）：
dataView：直接把数据显示出来 toolbox.feature.dataView
坐标轴
- xAxis：直角坐标系 X 轴。
- yAxis：直角坐标系 Y 轴。
- grid：直角坐标系网格。
网格（grid）是定义网格布局、大小和颜色的组件，用于定义直角坐标系整体的布局。
几个常用的属性，分别是：
- show 是否显示直角坐标系网格。
- left 是 grid 组件离容器左侧的距离。
- top 是 grid 组件离容器上侧的距离。
- right 是 grid 组件离容器右侧的距离。
- bottom 是 grid 组件离容器下侧的距离。
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,//grid 区域是否包含坐标轴的刻度标签,默认fasle
},
grid.containLabel 设置 grid 区域是否包含坐标轴的刻度标签，默认为 false。
这里要理解的是容器就是这个DOM元素，有点像绝对定位，父亲是DOM元素
xAxis和yAxis
type 是坐标轴类型，其类型有以下几种：
- value 是数值轴，适用于连续数据。（一般是y轴）
- category 是类目轴，适用于离散的类目数据。（一般是x轴）
- time 是时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同。
- log 是对数轴。适用于对数数据。
min/max设置最小最大值
xAxis.data 是类目数据。
一般在x轴中使用，类型必须是category，无type则 默认是category
需要注意的是，它只在类目轴（type: ‘category’）中有效。如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。 如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data的内容会自动从 series.data 中获取。
yAxis.axisLabel.formatter 是设置坐标轴单位的
axisLabel: {
formatter: "{value} 万",
show:"true",//设置是否显示刻度
},
xAxis.splitLine.show 设置是否显示分隔线。
yAxis.axisLine.show 设置是否显示坐标轴线。
yAxis.inverse 设置是否反向坐标轴。
series （[ ]用数组表示,数组里是一个个数据对象）
系列（series）是指：一组数值以及这些数值映射成的图。一系列的数据和图
参数：一组数值（data）、图表类型（type）、以及(关于这些数据如何映射成图的)参数。
type：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）等等
name 是系列的名字。
stack 是数据堆叠，同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加。
这里也标明了一个echarts实例中可以创建多个图表和坐标系。
这个时候再看series，里面一个数据对象就是一个图。
areaStyle: { } 区域填充样式。设置后显示成区域面积图，面积就会有颜色填充。
series-bar.barWidth 设置条柱的宽度。
series.smooth 设置是否平滑曲线显示。
series.showSymbol 是否显示 symbol，也就是图上的数据点，默认为 true。
饼状图
在series里配置
series.radius 设置饼形的半径。
series.center 设置饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
series.roseType 设置是否展示成南丁格尔图，通过半径区分数据大小，有两种模式：
- radius 区圆心角展现数据的百分比，半径展现数据的大小。
- area 所有扇区圆心角相同，仅通过半径展现数据大小。
series.itemStyle.borderRadius 用于指定饼图扇形区块的内外圆角半径。会变成不规则的圆
series-pie.labelLine.length 是视觉引导线第一段的长度。连接到图表的长度
series-pie.labelLine.length2 是连接到文字的线长度，一般比第一个多5 但是我没看出来差别
散点图
这个就比较复杂了，只做一个记录。可以看出来蓝桥的课做的还是很用心的。
tooltip.backgroundColor 是提示框浮层的背景颜色。
tooltip.formatter 是用来设置提示浮层内容显示的格式，它支持字符串模板和回调函数两种形式。
实在是太多了，就不记录了，有需要去看看原课程吧
交互组件
直接看这篇文章吧，写的太好了交互组件
异步数据加载
这里的数据是我们定义好的，但是现实中肯定是在数据库里拿的，这个时候就要用到异步数据加载
通过使用 jQuery 等工具异步获取数据，并填入 setOption 中。
$.get(
"data.json",
function (data) {
myChart.setOption({
title: {
text: "电影类型",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
type: "pie",
radius: "55%",
data: data.data_pie, // 数据
},
],
});
},
"json"
);
其实除了加载数据，设置图表实例的配置项、数据、万能接口、所有参数和数据的修改都可以通过 setOption 来完成，ECharts 会合并新的参数和数据，然后刷新图表。
如果开启动画配置项的话，ECharts 会找到两组数据之间的差异，然后通过合适的动画去表现数据的变化。
也就是说只要数据改变，echarts会自动更新表格
事件处理
myChart.on("事件名称", 回调函数);//和js一样 myChart是实例
在 ECharts 中，支持的常见鼠标事件有以下几种：
- click：点击鼠标时触发。
- dblclick：在同一个元素上双击鼠标时触发。
- mouseup：释放按下的鼠标键时触发。
- mousedown：按下鼠标键时触发。
- mousemove：当鼠标在一个节点内部移动时触发。
- mouseover：鼠标进入一个节点时触发。
- mouseout：鼠标离开一个节点时触发。
- globalout：鼠标移出坐标系触发。
- contextmenu：打开上下文菜单时被触发
例子：
var option = {
series: [
{
name: "人气",
type: "pie",
radius: "50%",
data: [
{
value: 35, name: "数据库" },
{
value: 48, name: "后端开发" },
{
value: 24, name: "信息安全" },
{
value: 30, name: "人工智能" },
],
},
],
};
myChart.setOption(option);
// 处理点击事件并且跳转到相应的课程页面
myChart.on("click", function (params) {
console.log(params.name);
window.open("https://www.lanqiao.cn/courses/?category=" + params.name);
});
params是series中的data
