蓝桥杯备赛——Echarts学习

news2024/11/24 2:10:44

文章目录

  • 前言
  • 学习 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);
      });

params是series中的data

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/384196.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

盘点代码情诗集合❤,程序员表白的巅峰之作,特此奉献

程序员怎么表白&#xff1f;写代码啊&#xff01;每到情人节&#xff0c;程序员们就纷纷出动&#xff0c;各种别出心裁的表白代码倾囊相送。我曾被大批表白代码砸晕&#xff0c;沉浸在“虚拟的”幸福感中不能自拔。我在众多代码中精选了以下几十条&#xff0c;每一条都是文学素…

Python中的遍历字典的键和值

一、Python的字典在项目的开发过程中&#xff0c;如果遇到有映射关系的内容可以考虑使用Python中的字典进行存储数据&#xff0c;字典中冒号前的数据称为【键】、冒号后的数据称为【值】。二、Python字典的用法2.1、Python的定义#Python字典的定义 字典名称{键1:值1,键2:值2,键…

JavaScript Date 日期对象

文章目录JavaScript Date 日期对象Date 对象Date 对象属性Date 对象方法创建日期设置日期两个日期比较JavaScript Date 日期对象 日期对象用于处理日期和时间。 Date 对象 Date 对象用于处理日期与实际。 创建 Date 对象&#xff1a; new Date(). 以上四种方法同样可以创建…

Validate端口使用手册

知行之桥EDI系统从2020版本开始引入了Validate端口&#xff0c;用来实现对XML数据文件进行一些规则的验证&#xff0c;保证XML数据文件的有效性。本文将介绍如何使用Validate端口。 端口创建 同其他功能性端口一样&#xff0c;只需要将Validata端口从左侧的端口清单拖拽到右侧…

子数组达到规定累加和的最大长度系列问题

文章目录1、题目一&#xff1a;正整数数组中子数组累加和 KKK 最大长度1.1 题目描述1.2 思路分析1.3 代码实现2、题目二&#xff1a;整数数组中子数组累加和为 KKK 的最大长度2.1 题目描述2.2 思路分析2.3 代码实现2.4 引申变形2.5 技巧应用题2.5.1 剑指 Offer II 010. 和为 k …

关于HTTP/3的小知识点

客户端用 TCP 发送了三个包&#xff0c;但服务器所在的操作系统只收到了后两个包&#xff0c;第一个包丢了。那么内核里的 TCP 协议栈就只能把已经收到的包暂存起来&#xff0c;“停下”等着客户端重传那个丢失的包&#xff0c;这样就又出现了“队头阻塞”。由于这种“队头阻塞…

Kubernetes之存储管理(中)

NFS网络存储 emptyDir和hostPath存储&#xff0c;都仅仅是把数据存储在pod所在的节点上&#xff0c;并没有同步到其他节点&#xff0c;如果pod出现问题&#xff0c;通过deployment会产生一个新的pod&#xff0c;如果新的pod不在之前的节点&#xff0c;则会出现问题&#xff0c…

CV——day81(1) 读论文: 基于自监督一致性学习的驾驶场景交通事故检测(有源码)

Traffic Accident Detection via Self-Supervised Consistency Learning in Driving Scenarios 基于自监督一致性学习的驾驶场景交通事故检测I. INTRODUCTIONIII. OUR APPROACHA. 帧预测B. 物体位置预测C. 驾驶场景上下文表示(DSCR)D. 协作多任务一致性学习E.交通事故判定IV. E…

UART串口通信协议

一、协议 1.1 消息格式 串口协议是一种全双工、异步通信协议&#xff0c;不需要同步时钟&#xff0c;数据的发送是一位一位的发送&#xff0c;完整的一帧数据通常由起始位、数据、奇偶校验位和停止位组成 1.2 波特率 为确保正确的收发信息&#xff0c;双方必须设置相同的波…

火山引擎 DataLeap:揭秘字节跳动数据血缘架构演进之路

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 DataLeap 是火山引擎数智平台 VeDI 旗下的大数据研发治理套件产品&#xff0c;帮助用户快速完成数据集成、开发、运维、治理、资产、安全等全套数据中台建设&#x…

MySQL 中的锁有哪些类型,MySQL 中加锁的原则

锁的类型MySQL 找那个根据加锁的范围&#xff0c;大致可以分成全局锁&#xff0c;表级锁和行级锁。全局锁全局锁&#xff0c;就是对整个数据库加锁。加锁flush tables with read lock解锁unlock tables全局锁会让整个库处于只读状态&#xff0c;之后所有的更新操作都会被阻塞&a…

OB运维 | 连接 kill 中的 session_id

作者&#xff1a;姚嵩 外星人… 本文来源&#xff1a;原创投稿 *爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注明来源。 背景&#xff1a; 通过 obproxy 连接 OB 后&#xff0c;发现&#xff1a; kill 命令使⽤ show processli…

如何写出让人看不懂的MATLAB代码?

最近呢有不少好奇的伙伴私下问咱这是怎么实现大幅度降低matlab代码可读性。于是咱准备将相关的资源分享给大家&#xff0c;这个工具的根来源于大神thrynae (Rik)公开分享一款名叫minify的小工具图片。 咱也不藏着掖着&#xff0c;其实大家用minify作为关键词检索&#xff0c;不…

学生成绩管理系统/学生信息管理系统

文章目录项目介绍一、技术栈二、项目功能介绍三、功能页面展示四、获取代码项目介绍 一、技术栈 编程语言&#xff1a;Java 技术栈&#xff1a;ServletJspJdbcEasyUIjQueryAjax面向接口编程 二、项目功能介绍 用户角色&#xff1a;学生、教师、系统管理员。&#xff1b; 管…

Nuxt 3.0 全栈开发

Nuxt 3.0 全栈开发 - 杨村长 - 掘金小册核心知识 工程架构 全栈进阶 项目实战&#xff0c;快速精通 Nuxt3 开发&#xff01;。「Nuxt 3.0 全栈开发」由杨村长撰写&#xff0c;299人购买https://s.juejin.cn/ds/S6p7MVo/ 这门课我会全面讲解 Nuxt3 核心知识&#xff0c;然后…

【uni-app教程】一、UniAPP 介绍

一、UniAPP 介绍 (1) 什么是 UniAPP? uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到 iOS&#xff0c;Android&#xff0c;HS&#xff0c;以及各种小程序&#xff08;微信/支付宝/百度/头条/QQ/钉钉》等多个平台&#…

Docker之部署Canal

Canal 就是一个同步增量数据的一个工具。 目录概念Mysql开启binlog是否开启binlog开启binlog日志创建授权用户部署Canal拉取镜像挂载properties配置文件创建容器概念 canal是阿里巴巴旗下的一款开源项目&#xff0c;纯Java开发。基于数据库增量日志解析&#xff0c;提供增量数…

VTK例子--使用不同的vtkActor同时显示灰度图、体渲染、多边形

在实际项目中&#xff0c;常遇到不同类型的数据在同一个渲染窗口显示&#xff1b;如网格多边形与灰度图像的显示、体渲染与多边形的显示、体渲染与灰度图像的显示&#xff0c;如下面几张图的效果&#xff1b;多边形灰度图像体渲染多边形体渲染灰度图像如何实现这种混合显示的效…

怎么连接同局域网下的其他同事的mysql

**一、双击运行MySQL 5.5 Command Line Client。**然后输入你这个设备的MySQL的root账户密码 二、输入grant all privileges on *.* to root% identified by"root";&#xff08;identified by后面的是别人要登入的密码&#xff09;后回车。这样就设置局域网内所有ip都…

【NLP相关】NLP的发展历程

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️&#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…