记录vue3导入并使用echarts自定义主题文件设置统一图表样式

在做数据可视化网站时,有时需要用到多个图表,这时就需要对图表的样式做一个统一的设计使网站外观更整齐。具体步骤如下:

第一步:在echarts官网定制好主题,并下载js文件

第二步:在index.html文件引入该文件

第三步:在main.js文件写入以下代码

import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router/index.js"  // 导入路由
import * as echarts from "echarts"
import("@/assets/js/football_customed.js")  // 异步加载echarts自定义主题文件// 注册路由
const app = createApp(App)
app.use(router)
app.mount("#app")// 图表处理
window.echarts = echarts

第四步:在需要使用图表的组件中注册主题

第五步:修改下载的js文件,把原本的this参数改成window

 

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

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

相关文章

【MybatisPlus】BaseMapper详解,举例说明

一、BaseMapper 简介 MyBatis-Plus 的核心类 BaseMapper 主要是用于提供基本的 CRUD(创建、读取、更新、删除)操作的接口定义。它是 MyBatis-Plus 框架中的一个重要组成部分,可以大大简化基于 MyBatis 的数据访问层代码的编写。 BaseMapper…

视频产品介绍:国标28181网关(GB/T28118网关)

目 录 一、概述 二、产品功能 (一)功能描述 (二)功能展示 1、国标接入 2、资源绑定 三、产品能力 (一)接入能力 (二)多级架构 四、特点优势 (一&am…

Rust泛型与trait特性,模仿接口的实现

泛型是一个编程语言不可或缺的机制。 C 语言中用"模板"来实现泛型,而 C 语言中没有泛型的机制,这也导致 C 语言难以构建类型复杂的工程。 泛型机制是编程语言用于表达类型抽象的机制,一般用于功能确定、数据类型待定的类&#xf…

三维GIS的业务导向

的确,目前三维GIS以做特效居多,酷炫、亮眼,从二维转到三维,第一眼就给人眼前一亮的感觉,就凭这一项,很多客户就会买单,GIS的客户以政府、科研院所、特种行业为主,买过一次单后&#…

【QT】定时器事件应用

public&#xff1a;//定时器void timerEvent(QTimerEvent *);private:int id;#include <QTimerEvent> //QWidget 默认不追踪鼠标事件 mylabel::mylabel(QWidget *parent) : QLabel(parent) {this->setMouseTracking(true);//启动定时器//参数1&#xff1a;触发定时器的…

JavaScript基础Ⅱ

目录 第2章 JavaScript基础语法(掌握) 11-JS代码调试 12-JS函数 第3章 JS事件 14-事件的绑定方式 常用事件(了解) 15-常用事件 第4章 JS内置对象(掌握) 16-数组 17-日期 18-数学运算 19-数字 20-全局函数 第2章 JavaScript基础语法(掌握) 11-JS代码调试 12-JS函数…

MSCKF3讲:后端理论推导(上)

MSCKF3讲&#xff1a;后端理论推导&#xff08;上&#xff09; 文章目录 MSCKF3讲&#xff1a;后端理论推导&#xff08;上&#xff09;1 MSCKF中的状态变量① IMU状态:② cam0状态&#xff1a;③ IMU和cam0间状态关系 2 微分方程递推&#xff08;数值解&#xff09;3 IMU状态预…

视频压缩软件哪个好用?强推这五款压缩软件

在数字化时代&#xff0c;我们每天都会接触到大量的视频内容&#xff0c;无论是在工作中制作视频&#xff0c;还是在日常生活中分享或观看。然而&#xff0c;随着高清晰度和4K视频的普及&#xff0c;视频文件的大小也逐渐增加&#xff0c;对存储空间和网络传输速度提出了更高的…

python基础(11)《Allure报告中的组件用法》

使用 官方教程&#xff1a;https://docs.qameta.io/allure 入门 想要看到allure报告&#xff0c;需要做2个步骤&#xff1a; 1、pytest执行时关联allure&#xff1a;pytest命令带上--alluredir 结果存放目录或--alluredir结果存放目录&#xff1b; 2、打开执行报告&#xff…

项目管理工具进度猫:自我管理的应用

在飞速发展的现代社会中&#xff0c;每个人都面临着巨大的竞争压力&#xff0c;如何在这激烈的环境中脱颖而出&#xff0c;实现个人的成长与成功&#xff1f;答案就在我们的日常行为中——自我管理。 一、自我管理的定义 自我管理&#xff0c;简单来说&#xff0c;就是对自己…

Linux-网络-011

1网络协议模型 1.1【OSI】协议模型 1.1.1应用层 实际发送的数据应用层:HTTP 超文本传输协议HTTPS FTP 文件传输协议TFTP 简单文本传输协议SMTP 邮件传输协议MQTT TELNET ..1.1.2表示层 发送的数据是否加密1.1.3会话层 是否建立会话连接1.1.4传输层 数据…

犯难了,99元一年服务器选腾讯云还是阿里云?

腾讯云服务器99元一年是真的吗&#xff1f;真的&#xff0c;只是又降价了&#xff0c;现在只要61元一年&#xff0c;配置为2核2G3M轻量应用服务器&#xff0c;40GB SSD盘&#xff0c;腾讯云百科txybk.com分享腾讯云官方活动购买链接 https://curl.qcloud.com/oRMoSucP 活动打开…

Java精品项目--第6期基于SpringBoot的茶叶商城的设计分析与实现

项目技术栈 SpringBootMavenMySQLJAVAMybatis-PLusVue.js&#xff08;非前后端分离&#xff09;Element-UI&#xff08;非前后端分离&#xff09;… 表截图 项目截图

UE4 Niagara 关卡1.4官方案例解析

sprites can face the camera&#xff0c;or they can face any arbitrary vector&#xff0c;in this case the vector between the center of the system and the particle itself&#xff08;粒子可以面对摄影机&#xff0c;也可以面对任意向量&#xff0c;在这个实例中的向…

纯手工搭建一个springboot maven项目

前言&#xff1a;idea社区版无法自动搭建项目&#xff0c;手动搭建的经验分享如下&#xff1a; 1 包结构 参考下图&#xff1a; 2 项目结构 3 maven依赖 具体的项目包结构如下图&#xff1a; 依据这个项目包结构配置一个springboot 的 pom依赖&#xff1a; <?xml ve…

java多线程实现同步的方式介绍

在 Java 多线程编程中&#xff0c;同步是确保多个线程在访问共享资源时的正确性和一致性的重要机制。Java 提供了多种方式来实现线程同步&#xff0c;每种方式都有其特点和适用场景。以下是一些常见的同步方式及其特点和应用场景&#xff0c;以及简单的例子来说明它们的用法。 …

低成本便捷使用最新Claude 3模型的方法!

3 月 4 日&#xff0c;被称为 OpenAI 最强竞争对手的大模型公司 Anthropic 宣布推出 Claude3 系列模型&#xff0c;与 Gemini 类似&#xff0c;模型按照大小分为三个&#xff1a;Claude 3 Haiku、Claude 3 Sonnet 和 Claude 3 Opus。Opus 目前在官方发布的测试成绩中全方位超越…

电脑主机弄丢后赔偿却还收150元费用?

“电脑主机丢失后&#xff0c;我被收取了150元的赔偿费。” 22日&#xff0c;家住临沂市沂水县龙家泉镇的吴女士拨打热线电话反映&#xff0c;家里电脑主机出现问题&#xff0c;她把电脑放在镇上的一家店里。 我去电脑维修店修好了&#xff0c;对方丢了&#xff0c;但他们还是收…

vscode中eslint插件不生效问题

case: 最近使用webpack打包js资源中使用到了VS Code中的eslint插件辅助eslint plugin对代码进行校验&#xff0c;在.eslintrc.js文件中以及webpack.config.js配置好后&#xff0c; 在控制台运行npx webpack可以读取到eslint plugin的检测结果 一、eslint插件读取项目中.eslint…

Nodejs 第五十三章(serverLess)

什么是serverLess? serverLess并不是一个技术&#xff0c;他只是一种架构模型&#xff0c;(无服务器架构)&#xff0c;在传统模式下&#xff0c;我们部署一个服务&#xff0c;需要选择服务器Linux,windows等,并且还要安装环境&#xff0c;熟悉操作系统命令&#xff0c;知晓安…