当前位置：首页 > news >正文

蓝桥杯备赛——Echarts学习

news 2025/8/18 20:26:02

文章目录

前言
学习 ECharts 的方法
快速上手
基础知识
- option 配置选项
- - 可选配置
  - - title 标题组件
    - tooltip 提示框组件
    - - axisPointer 坐标轴指示器
    - legend 图例组件
    - toolbox 工具栏
    - 坐标轴
    - - xAxis和yAxis
  - series （[ ]用数组表示,数组里是一个个数据对象）
饼状图
散点图
交互组件
异步数据加载
事件处理

前言

在这里插入图片描述
主要是掌握基础语法和四个基本图表以及对数据的动态更新

考题形式：
在这里插入图片描述
要用好官网，看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);});