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

前端数据可视化之【Echarts下载使用】

news 2025/6/8 17:31:25

目录

  • 🌟下载
    • 🌟浏览器引入
    • 🌟模块化引入
  • 🌟使用
    • 🌟基本使用步骤
  • 🌟绘制一个简单的图表
  • 🌟写在最后

在这里插入图片描述

🌟下载

🌟浏览器引入

  1. 官网下载界面：官方网站 或 Echarts中文社区
    • 可自由选择下载不同版本、不同主题、所需地图数据，根据需求进行个性化定制。
    • 刚开始学习和开发环境建议下载源代码版本，因为该版本包含了常见的警告和错误提示。
    • 在线定制可以选择需要的图表、坐标系、组件、以及是否压缩等一些其他选项。
  2. 也可以通过cdn引入，国内bootcdn：https://www.bootcdn.cn/echarts/
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>

🌟模块化引入

可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

引入 ECharts

import * as echarts from 'echarts';

按需引入 ECharts 图表和组件

默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer
]);// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({// ...
});

🌟使用

Echarts这个框架的配置内容很是多，所以不要尝试着把这个框架中的方法都给记住。Echarts的官方文档介绍十分详细，所以使用的时候查看官方文档就可以 https://echarts.apache.org/zh/download.html

🌟基本使用步骤

  1. 引入依赖JavaScript文件 首先将echarts.js引入,然后为echarts提供一个DOM容器
<script src="echarts.js"></script>
<div id="chart" style="width: 800px;height:400px;"></div>
  1. 初始化echarts 基于准备好的dom，初始化echarts
// 引入echarts.js后，可获得全局 `echarts` 对象 即 `window.echarts`
// 初始化DOM容器，用echarts.init()函数          
var myChart = echarts.init(document.getElementById('chart'));
  1. 设置图表的配置项和数据echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中。
//配置数据选项
var options={  title:{},//图表的标题
}
myChart.setOption(options);

🌟绘制一个简单的图表

按照上面的流程就可以实现一个简单的图表，完整代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

🌟写在最后

更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！

相关文章：

前端数据可视化之【Echarts下载使用】

目录 &#x1f31f;下载&#x1f31f;浏览器引入&#x1f31f;模块化引入 &#x1f31f;使用&#x1f31f;基本使用步骤 &#x1f31f;绘制一个简单的图表&#x1f31f;写在最后 &#x1f31f;下载 &#x1f31f;浏览器引入 官网下载界面&#xff1a;官方网站 或 Echarts中文…...

编程日记 2023/10/25 20:23:04

本机计算机上的mysql启动后停止

本机计算机上的mysql启动后停止 原因&#xff1a;mysql5.0和mysql8.0配置不同 把my.ini改成以下设置然后再重新 mysqld --initialize-insecure --usermysql然后再启动 net start mysqlmysql8.0 下面的路劲可自定义 [client] default-character-setutf8 [mysql] default-cha…...

编程日记 2023/10/25 20:22:04

Java中ReentrantLock测试线程的安全

使用场景 当需要在多线程环境下保证共享资源的安全访问时&#xff0c;可以使用Java中的ReentrantLock来实现线程安全。ReentrantLock是一个可重入的互斥锁&#xff0c;它提供了与synchronized关键字类似的功能&#xff0c;但更加灵活和扩展性强。 下面是一个使用ReentrantLoc…...

编程日记 2023/10/25 20:21:02

Vue-dvadmin-d2-crud-plus-常用配置-row-handle-columns-options

文章目录 1.row-handle columnHeader width minWidth fixed align renderHeader edit view remove remove.confirm remove.confirmTitle remove.confirmText custom 范例1 范例2 2.columns title key width minWidth fixed renderHeader sortable sortMethod sortBy sortOrders…...

编程日记 2023/10/25 20:20:01

【OpenCV实现图像的算数运算,性能测试和优化,改变颜色空间】

文章目录 OpenCV功能概要图像的算数运算性能测试和优化改变颜色空间对象追踪 OpenCV功能概要 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习库&#xff0c;提供了丰富的图像处理和计算机视觉算法。它支持多种编程语言&…...

编程日记 2023/10/25 20:18:59

多级缓存入门

文章目录 什么是多级缓存JVM进程缓存环境准备安装MySQL导入Demo工程导入商品查询页面 初识Caffeine Lua语法初识Lua第一个lua程序变量和循环Lua的数据类型声明变量循环 条件控制、函数函数条件控制 多级缓存安装OpenRestyOpenResty快速入门反向代理流程OpenResty监听请求编写it…...

编程日记 2023/10/25 20:17:58

CentOS卸载LVM磁盘的方法

在客户环境上遇到一个问题&#xff0c;本身的磁盘满了&#xff0c;需要把没有用的lvm逻辑卷卸载掉&#xff0c;然后挂上去&#xff0c;下面记录一下过程。 卸载原磁盘 umount /data # 如果/data目录正在被其他进程使用中&#xff0c;则使用fuser强制关闭&#xff0c;然后Umou…...

编程日记 2023/10/25 20:16:56

ChatGPT：Spring Boot和Maven——Java应用开发的关键工具和区别

ChatGPT&#xff1a;Spring Boot和Maven——Java应用开发的关键工具和区别 Springboot是什么&#xff1f; ChatGPT&#xff1a; Spring Boot是一个用于构建Java应用程序的开源框架&#xff0c;它是Spring Framework的一部分&#xff0c;但旨在简化Spring应用程序的开发。Sprin…...

编程日记 2023/10/25 20:13:51

智能振弦传感器：参数智能识别技术的重要科技创新

智能振弦传感器&#xff1a;参数智能识别技术的重要科技创新 智能振弦传感器是一种能够自动识别传感器参数的高科技产品。它的研发得益于河北稳控科技的不断创新和努力&#xff0c;其电子标签专用读数模块模块TR01将传感器生产和标定过程实现了自动化。该模块将温度电阻两芯线…...

编程日记 2023/10/25 20:12:50

tooltip实现悬停内容染色

一: 通过highlight.js项目实现对json字符串的染色高亮 此项目是jsp文件,并且引用了element-ui/highlight.js的组件 二: 实现效果 三: 代码实现 关键点在于成功引入相关的js及css&#xff0c;并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方…...

编程日记 2023/10/25 20:11:49

“深入探讨Java JUC中的ReentrantLock锁：实现多线程同步与并发控制“

简介 1、从Java5开始&#xff0c;Java提供了一种功能更强大的线程同步机制——通过显式定义同步锁对象来实现同步&#xff0c;在这种机制下&#xff0c;同步锁由Lock对象充当。 2、Lock 提供了比synchronized方法和synchronized代码块更广泛的锁定操作&#xff0c;Lock允许实…...

编程日记 2023/10/25 20:10:47

Java|学习|多线程

1.多线程的一些概念 进程&#xff1a;是正在运行的程序 是系统进行资源分配和调用的独立单位 每一个进程都有它自己的内存空间和系统资源。 线程&#xff1a;是进程中的单个顺序控制流&#xff0c;是一条执行路径。 单线程&#xff1a;一个进程如果只有一条执行路径&#xff0…...

编程日记 2023/10/25 20:09:46

【Python机器学习】零基础掌握VotingClassifier集成学习

为什么一些数据预测模型在复杂场景下表现不如预期？ 在当今数据驱动的世界中，企业和研究者面临着如何从大量数据中提取有价值信息的挑战。假设一个电商公司想要通过用户行为数据预测产品销量，通常会使用单一的算法模型，如逻辑回归、随机森林或朴素贝叶斯。但问题来了，如果…...

编程日记 2023/10/25 20:08:45

深入了解JavaScript中的AJAX和HTTP请求

在现代Web开发中&#xff0c;AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;和HTTP请求被广泛应用于实现动态交互式网页。本文将深入探讨AJAX的概念、工作原理以及使用方法。 什么是AJAX&#xff1f; AJAX是一种利用JavaScript和HTTP请求与服务器进行异步通信的…...

编程日记 2023/10/25 20:07:43

第87步 时间序列建模实战：LSTM回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们介绍大名鼎鼎的LSTM回归。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal…...

编程日记 2023/10/25 20:06:42

GB/T28181协议介绍

GB/T28181协议介绍 文章目录 GB/T28181协议介绍总体介绍GB/T28181基本结构GB/T28181关键协议流程设备注册设备目录查询实时视频播放流程 GB/T28181协议总结 说到GB/T28181协议&#xff0c;如果你是从事视频监控领域的工作&#xff0c;那对他一定不陌生&#xff0c;在公共安全、…...

编程日记 2023/10/25 20:05:41

光致发光荧光量子检测的作用

光致发光荧光量子检测是一种测试技术&#xff0c;可以用来测量荧光材料的荧光光谱、荧光量子效率和发光寿命等参数&#xff0c;具有高灵敏度、高分辨率和自动化程度高等优点。 光致发光荧光量子检测的应用范围广泛&#xff0c;可以应用于材料科学、生物科学、医学、光学器件、能…...

编程日记 2023/10/25 20:04:40

深度学习第四课

第九章 卷积神经网络解读 9.1 计算机视觉 目标分类 目标识别 64x64x312288 1000x1000x33000000 使用传统神经网络处理机器视觉面临的一个挑战是&#xff1a;数据的输入会非常大 一般的神经网络很难处理海量图像数据。解决这一问题的方法就是卷积神经网络 9.2 卷积运算 …...

编程日记 2023/10/25 20:03:38

Linux创建临时文件mkstemp()tmpfile()

有些程序需要创建一些临时文件&#xff0c;仅供其在运行期间使用&#xff0c;程序终止后即行删除。 很多编译器程序会在编译过程中创建临时文件。GNU C 语言函数库为此而提供了一系列库函数。&#xff08;之所以有“一系列”的库函数&#xff0c;部分原因是由于这些函数分别继…...

编程日记 2023/10/25 20:02:37

js的节流和防抖详解

防抖和节流是JavaScript中的常见优化技巧&#xff0c;它们可以帮助我们控制代码在特定的时间间隔内执行的频率&#xff0c;从而优化性能。下面详细讲解它们的原理和使用方法。 防抖&#xff08;Debounce&#xff09;&#xff1a; 防抖的原理是当一个事件频繁触发时&#xff0…...

编程日记 2023/10/25 20:01:36

pikachu靶场通关笔记20 SQL注入03-搜索型注入(GET)

目录 一、SQL注入 二、搜索型注入 三、源码分析 1、渗透思路1 2、渗透思路2 四、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入百分号单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取…...

编程新知 2025/6/8 16:44:46

【C语言】通用统计数据结构及其更新函数（最值、变化量、总和、平均数、方差等）

【C语言】通用统计数据结构及其更新函数&#xff08;最值、变化量、总和、平均数、方差等&#xff09; 更新以gitee为准&#xff1a; gitee 文章目录 通用统计数据结构更新函数附录&#xff1a;压缩字符串、大小端格式转换压缩字符串浮点数压缩Packed-ASCII字符串 大小端转换什…...

编程新知 2025/6/8 15:38:22

【LLM大模型技术专题】「入门到精通系列教程」LangChain4j与Spring Boot集成开发实战指南

LangChain4j和SpringBoot入门指南 LangChain4jLangchain4j API语言模型消息类型内存对象ChatMemory接口的主要实现设置 API 密钥SpringBoot Configuration配置ChatLanguageModelStreamingChatLanguageModel初始化ChatModel对象模型配置分析介绍说明通过JavaConfig创建ChatModel…...

编程新知 2025/6/8 12:48:38

RTOS学习之重难点

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…...

编程新知 2025/6/8 10:51:21

如何以 9 种方式将照片从手机传输到笔记本电脑

使用 USB 电缆可以将照片从智能手机复制到计算机。但是&#xff0c;如果没有 USB 数据线&#xff0c;如何将照片从手机无线传输到笔记本电脑呢&#xff1f;为了解决这个问题&#xff0c;我们搜索并测试了不同的应用程序&#xff0c;然后总结了本指南中分享的 9 个有效选项。您可…...

编程新知 2025/6/8 1:07:57

c++中的输入输出流（标准IO，文件IO，字符串IO）

目录 &#xff08;1&#xff09;I/O概述 I/O分类 不同I/O的继承关系 不同I/O对应的头文件 &#xff08;2&#xff09;iostream 标准I/O流 iostream头文件中的IO流对象 iostream头文件中重载了<<和>> 缓冲区示意图 标准输入流 cin用法 cin&#xff1a;按空…...

编程新知 2025/6/8 0:38:58

在 Kali 上打造渗透测试专用的 VSCode 环境

Kali Linux 是渗透测试领域的首选操作系统&#xff0c;搭配一款高效的代码编辑器可以显著提升工作效率。Visual Studio Code&#xff08;VSCode&#xff09;以其轻量、强大的扩展性和跨平台支持&#xff0c;成为许多安全研究者的选择。本文将详细介绍如何在 Kali Linux 上安装 …...

编程新知 2025/6/7 23:58:55

汽车安全体系：FuSa、SOTIF、Cybersecurity 从理论到实战

汽车安全&#xff1a;功能安全&#xff08;FuSa&#xff09;、预期功能安全&#xff08;SOTIF&#xff09;与网络安全(Cybersecurity) 从理论到实战的安全体系 引言&#xff1a;自动驾驶浪潮下的安全挑战 随着自动驾驶技术从L2向L4快速演进&#xff0c;汽车安全正从“机械可靠…...

编程新知 2025/6/7 22:59:51

k8s下离线搭建elasticsearch

前提 已经完成k8s安装 已经完成相关组件如helm的安装 下载es的chart包 如下地址 https://helm.elastic.co/helm/elasticsearch/elasticsearch-版本号.tgz 如6.8.10 https://helm.elastic.co/helm/elasticsearch/elasticsearch-6.8.10.tgz 修改配置 修改value.yaml文件…...

编程新知 2025/6/7 22:40:32

技巧小结：外部总线访问FPGA寄存器

概述 需求&#xff1a;stm32的fsmc总线挂载fpga&#xff0c;stm32需要访问fpga内部寄存器 1、分散加载文件将变量存放到指定地址即FPGA寄存器地址 sct文件指定变量存储地址&#xff0c;从而可以直接访问外设&#xff0c;&#xff08;28335也可以&#xff0c;不过用的是cmd文件…...

编程新知 2025/6/7 22:30:28