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

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

news 2025/9/18 22:22:31

目录

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

在这里插入图片描述

🌟下载

🌟浏览器引入

  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

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/16 15:51:37

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/9/7 8:51:12

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/9/4 2:23:45

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2025/9/2 16:53:10

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/9/11 9:00:40

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

编程新知 2025/9/2 3:57:34

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...

编程新知 2025/9/14 23:15:01

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2025/9/17 21:24:38