Vue2集成Echarts实现可视化图表

一、依赖配置

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.mzph.cn/news/42082.shtml

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

相关文章

MySQL索引(Index)

Index 数据库中的索引(Index)是一种数据结构,用于提高数据库查询性能和加速数据检索过程。索引可以看作是数据库表中某个或多个列的数据结构,类似于书中的目录,可以帮助数据库管理系统更快地定位和访问数据。它们是数…

Linux——KVM虚拟化

目录标题 虚拟化技术虚拟化技术发展案例KVM简介KVM架构及原理KVM原理KVM虚拟化架构/三种模式虚拟化前、虚拟化后对比KVM盖中盖套娃实验 虚拟化技术 通过虚拟化技术将一台计算机虚拟为多台逻辑计算机,在一台计算机上同时运行多个逻辑计算机,同时每个逻辑…

智安网络|零信任安全框架:保障数字化时代网络安全的最佳实践

随着数字化时代的快速发展,网络安全问题变得越来越突出。传统的安全防御模式已经不再适用于现代复杂的网络环境中。为了应对日益增长的网络威胁,零信任安全模式应运而生。 一、什么是零信任? 零信任是一种安全框架和哲学,它基于…

pytest的fixture梳理

fixture特性 夹具是在测试中用于提供共享资源、设置测试环境或模拟行为的工具。 1. 可以重复使用,多个用例可以使用同一个fixture 2. 一个测试用例可以使用多个装置 import pytest # Arrange pytest.fixture def first_entry():return "a"# Arrange pyt…

全新 – Amazon EC2 M1 Mac 实例

去年,在 re: Invent 2021 大会期间,我写了一篇博客文章,宣布推出 EC2 M1 Mac 实例的预览版。我知道你们当中许多人请求访问预览版,我们尽了最大努力,却无法让所有人满意。不过,大家现在已经无需等待了。我很…

postmarketOS

主步骤 #以下全程插入usb线 fastboot devices fastboot getvar all fastboot erase userdata fastboot erase system fastboot erase cachepmbootstrap init pmbootstrap installpmbootstrap flasher flash_rootfs --partition userdata pmbootstrap flasher flash_kernel…

java生成Excel表格

public HSSFWorkbook CreateJZZJSList() {// 绘制ExcelString fileName "自动分析详情";HSSFWorkbook wb new HSSFWorkbook();//创建工作相簿对象HSSFSheet sheet wb.createSheet(fileName); // --->创建了一个工作簿sheet.setDefaultRowHeight((short) 600);…

前端开发工具及环境配置

1.前端开发环境node npm环境配置 第一步:打开Download | Node.js (nodejs.org)下载,解压。 找到下载压缩包进行解压 解压到D盘目录下: 第二步:配置环境变量:右击此电脑点击属性进入高级系统设置 点击高级系统设置进入…

项目管理系统是什么?能干什么?有什么功能?一文看懂

阅读本文您可以了解:1、项目任务管理系统是什么;2、项目任务管理系统的作用;3、项目任务管理系统的功能 一、什么是项目任务管理 项目任务管理是指运用系统的理论方法,在有限的条件和资源下,对项目从开始到结束的全流…

Github下载任意版本的VsCode

下载历史版本VsCode(zip) 下载链接由三部分组成: 固定部分commit idVSCode-win32-x64-版本号.zip 固定部分: https://vscode.cdn.azure.cn/stable/ Commit id: 打开 vscode的GitHub:[https://github.com/microsoft/vscode/r…

(搜索) 剑指 Offer 13. 机器人的运动范围 ——【Leetcode每日一题】

❓剑指 Offer 13. 机器人的运动范围 难度:中等 地上有一个 m 行 n 列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左、右、上、下移动一格(不能移动到方格外)&…

shell脚本基础

目录 前言 一、概述 (一)、shell脚本基础概念 (二)、shell的类型 二、Shell变量 (一)、组成 1.变量名 2.变量值 (二)、类型 1.系统内置变量(环境变量) 2.自定…

PIN TO PIN替代LT8911EXB|CS5523低成本替代LT8911EXB|MIP DSI转DP EDP方案设计

PIN TO PIN替代LT8911EXB|CS5523低成本替代LT8911EXB|MIP DSI转DP EDP方案设计 LT8911EXB是MIPI DSI/CSI 转eDP转换芯片,ASL CS5523不需要改电路就可以直接PIN TO PIN替代与兼容LT8911EXB。 ASL CS5523与 LT8911EXB的功能与参数,用途方式以及封装方式和…

【题解】旋转数组的最小数字、比较版本号

文章目录 旋转数组的最小数字比较版本号 旋转数组的最小数字 题目链接&#xff1a;旋转数组的最小数字 解题思路1&#xff1a;遍历求最小值 代码如下&#xff1a; int minNumberInRotateArray(vector<int> rotateArray) {int min rotateArray[0];for(auto const&…

迪米特法则

迪米特法则&#xff0c;也称为最少知识原则&#xff08;Law of Demeter&#xff09;&#xff0c;是面向对象设计中的一个原则&#xff0c;旨在降低对象之间的耦合性&#xff0c;提高系统的可维护性和可扩展性。该原则强调一个类不应该直接与其它不相关的类相互交互&#xff0c;…

Android 控件截图保存本地并分享

目录 需求 需求分析 一、截图控件生成图片 二、将图片保存至本地 2.1 权限 2.2 保存图片 2.3 调用 三、分享 四、通过测试机型 需求 截图当前页面某个控件的内容&#xff0c;并且保存在本地&#xff0c;可分享。 需求分析 1.截图控件生成图片 2.保存至本地(需考虑版…

【SpringCloud】Ribbon定制化配置

文章目录 使用Ribbon自带负载均衡算法添加负载均衡算法ConfigurationRestTemplate使用上面负载均衡算法 自定义负载均衡算法负载均衡算法实现RestTemplate在Controller中使用该负载均衡算法ServiceIInstance解释 使用Ribbon自带负载均衡算法 添加负载均衡算法Configuration /…

实现矩阵地图与rviz地图重合

文章目录 一、rviz地图转换矩形地图(只能用于全局规划)二、在rviz上显示地图边界信息,可视化调整,实现重合(只能用于局部规划)一、rviz地图转换矩形地图(只能用于全局规划) 此方法矩形地图可能会与rviz地图不重合,通过改变偏移量x_offset,y_offset接近地图 可以将矩…

FL Studio for Windows-21.1.0.3713中文直装版功能介绍及系统配置要求

FL Studio 21简称FL水果软件,全称是&#xff1a;Fruity Loops Studio编曲&#xff0c;由于其Logo长的比较像一款水果因此&#xff0c;在大家更多的是喜欢称他为水果萝卜&#xff0c;FL studio21是目前最新的版本&#xff0c;这是一款可以让你的计算机就像是一个全功能的录音室&…

Docker Dockerfile Docker-compose学习笔记

文章目录 Centos环境下安装Docker配置镜像源 Windows环境下安装Docker配置镜像源 使用Dokcer镜像1.获取镜像2.查看镜像信息(1)列出镜像(2)镜像标签(3)镜像详细信息(4)镜像历史 3.搜索镜像4.删除和清理镜像(1)使用标签删除镜像(2)使用ID删除镜像(3)清理镜像 5.创建镜像(1)基于已…