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

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

news 2026/4/2 6:33:42

目录

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

在这里插入图片描述

🌟下载

🌟浏览器引入

  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

Vim编辑器的.swp文件：安全隐患与防范措施全解析

Vim编辑器.swp文件安全风险深度剖析与实战防护指南 当你深夜加班修改服务器配置文件时&#xff0c;突然断电导致Vim异常退出。第二天发现.nginx.conf.swp文件被恶意用户下载&#xff0c;内含未保存的数据库密码——这种场景在运维工作中并不罕见。.swp文件作为Vim的自动备份机制…...

编程新知 2026/4/2 6:28:29

Flux Sea Studio 极限测试：生成8K超高清巨幅海景壁纸的技术挑战与实现

Flux Sea Studio 极限测试&#xff1a;生成8K超高清巨幅海景壁纸的技术挑战与实现 最近在折腾AI生成图片&#xff0c;发现一个挺有意思的挑战&#xff1a;用Flux Sea Studio这类模型&#xff0c;能不能做出那种能铺满整块大屏幕的、细节拉满的8K超高清壁纸&#xff1f;特别是海…...

编程新知 2026/4/2 4:47:35

Python入门第6章：字典（键值对数据结构）

Python入门第6章&#xff1a;字典&#xff08;键值对数据结构&#xff09; 大家好&#xff0c;欢迎来到Python入门系列的第6章内容&#xff01;在前5章里&#xff0c;我们学会了变量、数据类型、运算符、if语句等基础知识点&#xff0c;也接触了列表、元组这两种序列数据结构—…...

编程新知 2026/4/2 2:43:04

intv_ai_mk11生成效果：对‘提高工作效率’需求输出结构清晰、可执行的5条建议

intv_ai_mk11生成效果&#xff1a;对"提高工作效率"需求输出结构清晰、可执行的5条建议 1. 模型介绍与使用场景 intv_ai_mk11是一个基于Llama架构的中等规模文本生成模型&#xff0c;特别适合处理通用问答、文本改写、解释说明等任务。这个模型已经完成本地部署&am…...

编程新知 2026/4/2 0:14:51

Nunchaku-flux-1-dev模型服务监控：使用Node.js搭建性能仪表盘

Nunchaku-flux-1-dev模型服务监控&#xff1a;使用Node.js搭建性能仪表盘 你是不是也遇到过这种情况&#xff1f;自己部署的AI模型服务&#xff0c;用着用着突然就变慢了&#xff0c;或者干脆没响应了&#xff0c;用户反馈过来才知道出了问题。等到发现的时候&#xff0c;可能…...

编程新知 2026/4/1 23:54:39

效率提升：基于快马平台为dc=y103pc=类参数快速打造调试工具

效率提升&#xff1a;基于快马平台为dcy103&pc类参数快速打造调试工具 在日常开发中&#xff0c;我们经常需要处理各种URL参数&#xff0c;尤其是类似"dcy103&pctest"这样的查询字符串。手动解析和修改这些参数不仅效率低下&#xff0c;还容易出错。最近我在…...

编程新知 2026/4/1 23:24:17

Phi-4-mini-reasoning Chainlit协作功能：多人审阅、批注与推理结果共享

Phi-4-mini-reasoning Chainlit协作功能&#xff1a;多人审阅、批注与推理结果共享 1. 模型概述 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族的一员&#xff0c;它经过专门微调以提升数…...

编程新知 2026/4/1 21:08:11

探索DeepCAD：基于深度学习的CAD模型生成技术入门

探索DeepCAD&#xff1a;基于深度学习的CAD模型生成技术入门 【免费下载链接】DeepCAD code for our ICCV 2021 paper "DeepCAD: A Deep Generative Network for Computer-Aided Design Models" 项目地址: https://gitcode.com/gh_mirrors/de/DeepCAD 副标题&…...

编程新知 2026/4/1 20:15:43

从CVE-2025-65112到NPM投毒：手把手教你搭建安全的私有包仓库（以PubNet为例）

从CVE-2025-65112到NPM投毒&#xff1a;手把手教你搭建安全的私有包仓库&#xff08;以PubNet为例&#xff09; 最近几年&#xff0c;软件供应链攻击事件频发&#xff0c;从SolarWinds事件到Log4j漏洞&#xff0c;再到最近的NPM投毒事件&#xff0c;每一次都让开发者们心惊胆战…...

编程新知 2026/4/1 20:01:36

当00后测试员给CEO系统提了487个缺陷后

在软件测试领域&#xff0c;一个年轻测试员的行动往往能引发行业深思。故事始于一家科技公司新上线的“CEO决策支持系统”——一个旨在为高管提供实时数据分析和战略建议的核心平台。项目团队信心满满地推进上线&#xff0c;却未料到一位00后测试员小陈的介入&#xff0c;彻底改…...

编程新知 2026/4/1 19:51:29