Vue2集成Echarts实现可视化图表

news/2024/12/29 3:24:49/

一、依赖配置

1、引入echarts相关依赖

也可以卸载原有的,重新安装

卸载:npm uninstall echarts --save

安装:npm install echarts@4.8.0 --save

引入水球图形依赖

npm install echarts-liquidfill@2.0.2 --save

水球图可参考文档:

https://gitcode.net/mirrors/ecomfe/echarts-liquidfill?utm_source=csdn_github_accelerator

引入3D效果图依赖:

npm install echarts-gl@2.0.9 --save

安装完成后,在package.json文件中查看,如图:

 2、修改配置文件

在main.js文件中,配置如下信息:

// ECharts 图表展示

import * as echarts from 'echarts';

// 球形图

import 'echarts-liquidfill';

Vue.prototype.$echarts = echarts;

配置完成后,如图:

3、主题风格下载

3.1 在官网下载主题风格

打开官网 Apache ECharts

点击下载-主题下载:

然后就可以下载对应的主题配置文件。

也可以点击【定制主题】选择合适的风格下载主题风格,如图:

 

 选择完成后,点下载主题,分为JS版本和JSON版本两种方式,可根据需要下载

 下载完成后,把JSON文件放到项目中,如图:

 我这里下载了两个风格,可自由选择。

4、代码实现

引用下载好的依赖:

以饼图为例,大致代码结构,可参照官网全部实例,地址如下:

Examples - Apache ECharts  样例如图:

 点击一个图形进去,可看到源码和文档配置说明,如图:

 

配置项说明,如图:

 然后,获取到图形的主题结构后,引入到代码中:

5、小结

Vue2集成Echarts实现可视化图表大致流程就是如上文所述,具体开发中,可根据自身需求和官网实例,以及官网示例参数说明进行调整。


http://www.ppmy.cn/news/1042338.html

相关文章

【论文综述】Transformer 综述

中国科学院、东南大学等联合发表最新的视觉 Transformer 综述_中科院AI算法工程师的博客-CSDN博客 Transformer综述大全(1)【A Survey of Visual Transformers】_香博士的博客-CSDN博客 Transformer综述大全(2)【A Survey of Vi…

程序员如何进行时间管理

时间管理对于程序员来说非常重要,以下是一些建议来帮助程序员进行时间管理: 1. 设置优先级:确定工作任务的优先级,将重要和紧急的任务放在首要位置。可以使用工作管理工具或任务列表来追踪和安排任务。 2. 分解任务:…

scala Product

scala Product 1. 由来 Product是Scala中的一个特质(trait),它用于表示具有固定数量元素的元组(Tuple)和案例类(Case Class)。它提供了一些通用方法,用于访问和操作这些元素。 2.…

08-信息收集-架构、搭建、WAF等

信息收集-架构、搭建、WAF等 信息收集-架构、搭建、WAF等一、前言说明二、CMS识别技术三、源码获取技术四、架构信息获取技术五、站点搭建分析1、搭建习惯-目录型站点2、搭建习惯-端口类站点3、搭建习惯-子域名站点4、搭建习惯-类似域名站点5、搭建习惯-旁注,c段站点…

“深入探究JVM内部机制:如何实现Java程序的运行环境?“

标题:深入探究JVM内部机制:如何实现Java程序的运行环境? 摘要:本文将深入探究Java虚拟机(JVM)的内部机制,重点讨论JVM如何实现Java程序的运行环境。我们将从JVM的结构、类加载、内存管理、垃圾…

剑指Offer39.数组中出现次数超过一半的数字 C++

1、题目描述 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1: 输入: [1, 2, 3, 2, 2, 2, 5, 4, 2] 输出: 2 2、VS2019上运行 使用哈希表的方法 #include <iost…

使用 Spring Security LDAP 实现身份验证

如果你曾经在生产级应用程序中实现过登录功能&#xff0c;你一定听说过 LDAP 身份验证。 LDAP 可用于任何类型的分层目录信息&#xff0c;LDAP 最流行的用途是存储组织数据。 举个例子&#xff0c;比如说你们公司一个典型的组织结构&#xff0c;那么一般都有董事、经理、监事…

第 4 章 链表(1)

4.1链表(Linked List)介绍 链表是有序的列表&#xff0c;但是它在内存中是存储如下 小结: 链表是以节点的方式来存储,是链式存储每个节点包含 data 域&#xff0c; next 域&#xff1a;指向下一个节点.如图&#xff1a;发现链表的各个节点不一定是连续存储.链表分带头节点的链…