v-charts的下载与引用

news2024/11/13 9:35:05

        近期,因项目需要,需用v-charts做一些登录后首页的展示图,按之前的逻辑echarts官网都有API直接拿来用就行了,但是我的项目框架是vue+springboot,我的vue版本是2.6.1,这个v-charts文档在网上搜了搜,属实不多,走了很多弯路,近期做一个总结,希望后续有人用的时候可以帮忙到他们;

一、哪里下载? 在github上面,下载巨慢,很烦!       v-charts基于 Vue2.x 的 Echarts 组件icon-default.png?t=N7T8https://vue-echarts.github.io/二、如何引用?

        引用的方式方法很多,官网上有引用例子,总体上分为三种情况:

        1、js方式引用,官网文档上有例子,这里不多介绍;

                介绍 (v-charts.js.org)

        2、vue方式引用,官网文档上也有例子,同上;

        3、全局引用,此场景主要是很多地方使用到他,为方便,我这直接全局引用了;

main.js文件中添加,如果有别的图,直接对应的添加即可;

import 'v-charts/lib/style.css'
import VeLine from 'v-charts/lib/line.common'
import VeRing from 'v-charts/lib/ring.common'
import VePie from 'v-charts/lib/pie.common'
import VeLiquidfill from 'v-charts/lib/liquidfill.common'
import VeGauge from 'v-charts/lib/gauge.common'

Vue.component(VeLine.name, VeLine)
Vue.component(VeRing.name, VeRing)
Vue.component(VePie.name, VePie)
Vue.component(VeLiquidfill.name, VeLiquidfill)
Vue.component(VeGauge.name, VeGauge)

index.vue使用,为方便展示,我这数据截了个图

<ve-line :data="chartData"></ve-line>

其他图也是一样的方式方法;

 下一篇介绍一下复杂场景下图表的使用

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

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

相关文章

nginx服务部署及其平滑升级

概述 1. 7层负载均衡&#xff08;nginx&#xff09; 1. 停掉4层的环境 systemctl disable --now keepalived.service # 停用之前的4层协议方式2. 源码安装nginx tar zxf nginx-1.22.1.tar.gz 具体方式是源码编译“三部曲” ./configure # 负责检查环境&#xff0c;生成指导…

每日OJ_牛客_星际密码(矩阵+斐波那契)

目录 牛客_星际密码&#xff08;矩阵斐波那契&#xff09; 解析代码 牛客_星际密码&#xff08;矩阵斐波那契&#xff09; 星际密码__牛客网 解析代码 这个题目首先需要明确矩阵是固定的&#xff0c;其次是矩阵相乘的方法。解题思路&#xff1a;初始化斐波那契数列&#xff…

leetcode刷题-二叉树05

代码随想录二叉树part05|654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树 654.最大二叉树一遍过&#xff0c;不过貌似有多种解法&#xff0c;后序再补充 617.合并二叉树700.二叉搜索树中的搜索98.验证二叉搜索树看其他解题方法 654.最大二叉树 代码…

RCE的另外一些绕过练习

目录 被过滤了flag怎么办 方法 结果 过滤了flag、php、system 方法一 结果 ​编辑 方法二 过滤了很多但是主要的就是过滤了空格 和 注意一下这个就行 方法一 方法二 相对于上面一道题来说多过滤了一个括号 方法一 被过滤了flag怎么办 <?php error_reportin…

29岁才转行软件测试,目前31了,我的一些经历跟感受

按惯例&#xff0c;先说下我基本情况。我是90年的&#xff0c;算是最早的90后&#xff0c;现在跟你介绍的时候还恬不知耻的说我是90后&#xff0c;哈哈&#xff0c;计算机专业普通本科毕业。在一个二线城市&#xff0c;毕业后因为自身能力问题、认知水平问题&#xff0c;再加上…

Cesium倾斜相机视角观察物体

先看效果&#xff1a; 在cesium中&#xff0c;我们有时需要倾斜相机视角去观察物体&#xff0c;如相机俯视45观察物体。 cesium的api提供了倾斜相机视角的配置&#xff0c;但是直接使用cesium的api不能达到我们想要的效果。 函数如下&#xff1a; function flyToBox() {let l…

XSS反射性

目录 1.URL 编码 "javascript:alert(1)" 2.HTML字符实体编码 &#;"javascript" 和 URL 编码 "alert(2)" 3.URL 编码 ":" 就是%3a 4.HTML字符实体编码 < 和 > 5.HTML字符实体编码 < 和 > 6.<s…

UGUI合批个人学习心得

从目前学到的知识上看&#xff0c;合批就是最基础的条件就是需要贴图和材质相同&#xff0c;这两个一样才有可能合批&#xff0c;UGUI合批是以Canvas为单位的。 UGUI的合批就是把某个Canvas下满足合批规则的UI控件的网格合并为一个大的网格&#xff0c;然后将这些网格合并在一起…

MyBatis首篇-入门第一文

目录 MyBatis关键特性和概念使用步骤简单示例 核心组件主要特点常见使用情景常见优化策略 MyBatis MyBatis是一个优秀的半自动化持久层框架&#xff0c;它支持定制化SQL、存储过程以及高级映射。MyBatis避免了大部分JDBC代码和手动设置参数以及获取结果集的繁琐性。用户只需要…

机器学习/深度学习——模型的欠拟合和过拟合,正则化方法详解

机器学习/深度学习——模型的欠拟合和过拟合&#xff0c;正则化方法 详解 搭配以下文章进行学习&#xff1a; 卷积神经网络&#xff1a; 深度学习——卷积神经网络&#xff08;convolutional neural network&#xff09;CNN详解&#xff08;一&#xff09;——概述. 步骤清晰…

WHD温湿度控制器:智能守护,让电力设备远离“温湿”困扰,安全运行每一刻

​在电力系统的庞大网络中&#xff0c;中高压开关柜、端子箱、环网柜及箱变等关键设备&#xff0c;其稳定运行直接关系到电力供应的安全与效率。WHD系列温湿度控制器以智能化、精准化的温湿管理方案&#xff0c;为电力设备筑起了一道坚不可摧的安全防线。 WHD系列温湿度控制器搭…

【Spring Boot】全局异常处理

目录 背景 前言 设计步骤 1.定义异常信息类&#xff1a; 2.自定义异常&#xff1a; 3.创建全局异常处理类 4.在控制器中抛出异常 5.输出 捕获 Valid 校验异常 背景 去面试的时候被问到SpringBoot项目中&#xff0c;如何处理全局异常的&#xff0c;也就是如何捕获全局异…

软件包管理器以及NFS

一.YUM 1.1 YUM介绍 学习YUM 软件仓库&#xff0c;可以完成安装、卸载、自动升级 rpm 软件包等任务&#xff0c;能够自动 查找并解决 rpm 包之间的依赖关系&#xff0c;而无须管理员逐个、手工地去安装每个 rpm 包&#xff0c;使管 理员在维护大量 Linux 服务 器时更加轻松自…

MS Visual Studio使用ACLLib库

目录 前言 二、MS Visual Studio使用ACLLib库 1.拿到库文件 2.新建VS项目 1&#xff09;打开VS Studio 2&#xff09;新建Windos 桌面向导文件 3&#xff09;创建 4&#xff09;选择空项目 5&#xff09; 新建main.c文件 3.将得到的acllib.c 与 acllib.h文件复制到项目…

HNU-2024计算机系统-小班讨论6

写在前面&#xff1a; 本次讨论课的选题主要围绕着程序性能优化章节中的分支预测部分&#xff0c;我个人感觉这板块是CSAPP教材中最不好理解的部分&#xff0c;需要大家多看教材&#xff0c;多讨论分析。 本文所有题目由全组同学共同完成&#xff0c;感谢每一位同学的支持与付…

【C++】序列与关联容器(二)序列容器

【C】序列与关联容器&#xff08;二&#xff09;序列容器 一、C 标准库中的序列容器模板二、array 容器模板三、vector元素模板 一、C 标准库中的序列容器模板 每种容器的实现方法的难易不同&#xff0c;特性不同&#xff0c;适用的应用场景不同 array &#xff1a;元素个数固…

11.4.软件系统分析与设计-算法的分析与设计

算法的分析与设计 涉及到的考点&#xff1a; C语言数据结构(树、链表)–考的不多时间复杂度和空间复杂度的计算排序算法四大经典算法 程序设计语言的基本成分 数据成分&#xff1a;指一种程序设计语言的数据和数据类型。数据分为常量&#xff08;程序运行时不可改变&#x…

让IP实现https访问的方法

IP SSL证书是主要保护公网ip地址的一种专属信任SSL证书&#xff0c;相比而言IP SSL证书体现的定位很明确。 IP SSL证书是一种数字证书&#xff0c;用于保护网络服务器和网络浏览器之间的通信。它是由受信任的证书颁发机构(CA)颁发的安全套接字层(SSL)证书。证书用于验证服务器…

day 26网络编程—协议

1、协议&#xff1a;通信双方约定的一套标准 2、国际网络通信协议标准&#xff1a; 1.OSI协议&#xff1a; 应用层 发送的数据内容 表示层 数据是否加密 会话层 是否建立会话连接 传输层 数据传输的…

丑数的计算

丑数 就是只包含质因数 2、3 和 5 的正整数。 给你一个整数 n &#xff0c;请你判断 n 是否为 丑数 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;n 6 输出&#xff1a;true 解释&#xff1a;6 2 3 示…