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

news/2024/7/19 14:35:00 标签: echarts, 前端, vue3引入echarts主题, vue3, js

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

第一步:在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.niftyadmin.cn/n/5405332.html

相关文章

C# 三层架构

C# 三层架构(C# Three-Tier Architecture)是一种常见的软件架构模式,用于将一个应用程序划分为三个逻辑层:表示层(Presentation Layer)、业务逻辑层(Business Logic Layer)和数据访问…

Vue2+ElementUI列表、表格组件的封装

Vue2ElementUI列表组件的封装:引言 在日常开发中,我们经常会遇到需要展示列表数据的场景。ElementUI 提供的 el-table 组件是一个功能强大的表格组件,可以满足大部分的需求。但是,在实际应用中,我们往往需要根据业务需…

人工智能与网络安全

目录 概述 人工智能在网络安全中的应用 威胁检测 自动化响应

过于老旧的pytorch_ssim包 请从github下载源码

有些冷门算法真的不要随便pip,有可能下载到史前版本…最好还是找源代码 汗 今天要用到SSIM损失函数,从网上简单看了一下原理就想测试一下,偷了一下懒就直接在命令行输入pip install pytorch_ssim了,结果报了一堆错误(汗…

IDEA开发环境的安装与编写第一个程序

1.下载 IDEA(全称IntelliJ IDEA)是用于Java程序开发的集成环境(也可用于其他语言),它在业界被公认是最好的Java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代…

基础算法 - 快速排序、归并排序、二分查找、高精度模板、离散化数据

文章目录 前言Part 1:排序一、快速排序二、归并排序 Part 2:二分一、二分 - 查找左边界二、二分 - 查找右边界 Part 3:高精度一、高精度加法二、高精度减法三、高精度乘法四、高精度除法 Part 4:离散化一、区间和 前言 由于本篇博…

算法D27|回溯算法4| 93.复原IP地址 78.子集 90.子集II

93.复原IP地址 本期本来是很有难度的,不过 大家做完 分割回文串 之后,本题就容易很多了 题目链接/文章讲解:代码随想录 视频讲解:回溯算法如何分割字符串并判断是合法IP?| LeetCode:93.复原IP地址_哔哩哔…

2024高频前端面试题 HTML 和 CSS 篇

JS和ES6 篇: ​​​​​​​2024高频前端面试题 JavaScript 和 ES6 篇-CSDN博客 一 . HTML 篇 1. H5有什么新特性 1) 语义化标签 用正确的标签做正确的事情。 html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析&…