echarts vue 动画效果的水球图、波浪图教程

1、安装插件

前提是已经安装了echarts(我的版本是4.2.1)
npm install echarts-liquidfill --save
我安装了3.1.0版本的,结果运行时报错"TypeError: wave.ensureState is not a function"
在这里插入图片描述
原因:echarts版本和echarts-liquidfill的版本对应不上,根据下面的搭配版本安装就不会报错了

echarts@4.9.0 + echarts-liquidfill@2.0.6
echarts@5.2.0 + echarts-liquidfill@3.0.0

我安装了指定版本npm install echarts-liquidfill@2.0.6 --save

2、示例

2.1 效果图

里面的波浪有动画效果
在这里插入图片描述

2.2 代码实现

<template><div id="main" style="width: 110px; height: 110px;"></div>
</template>
import echarts from 'echarts';
import 'echarts-liquidfill';var chart = echarts.init(document.getElementById('architectureTarget'));
let option = {series: [{type: 'liquidFill',radius: '95%', // 波浪样式,不设置则为平直样式waveAnimation: true,direction: 'right', // 向右移动data: [{value: 0.85,itemStyle: {normal: {color: '#558bec'}},}],outline: {borderDistance: 7, // 外部轮廓与图表的距离itemStyle: {borderColor: '#558bec', // 边框的颜色borderWidth: 6, // 边框的宽度shadowBlur: 0, // 外部轮廓的阴影范围 一旦设置了内外都有阴影, 设为0可以去掉容器灰色背景},},label: { // 数据展示样式show: true,color: '#333',insideColor: '#fff',fontSize: 28,fontWeight: 600,align: 'center',baseline: 'middle',position: 'inside',},}]
};
option && charts.setOption(option);

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

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

相关文章

IDC 中搭建 Serverless 应用平台:通过 ACK One 和 Knative 玩转云资源

作者&#xff1a;元毅、庄宇 如何打造云上&#xff08;公共云&#xff09;、云下&#xff08;IDC 数据中心&#xff09;统一的云原生 Serverless 应用平台&#xff0c;首先我们来看一下 ChatGPT 4 会给出什么样的答案&#xff1a; 如何打造云上、云下统一的云原生 Serverless…

MySQL 多表查询 连接查询 内连接

介绍 内连接查询是两张表中交集的部分 连接模式 隐式内连接 SELECT 字段列表 FROM 表1,表2 WHERE 条件显式内连接 SELECT 字段列表 FROM 表1 [INNER] JOIN 表2 ON 连接条件案例 有两张表一个表为学生表&#xff0c;另一个表为班级表&#xff0c;现在需要查询学生时候在查…

2023中国PostgreSQL数据库生态大会:洞察前沿趋势,探索无限可能(附核心PPT资料下载)

随着数字化浪潮的推进&#xff0c;数据库技术已成为支撑各行各业数字化转型的核心力量。2023中国PostgreSQL数据库生态大会的召开&#xff0c;无疑为业界提供了一个深入交流、共同探索PostgreSQL数据库技术未来发展趋势的平台。本文将带您走进这场盛会&#xff0c;解析大会的亮…

Laravel Octane 和 Swoole 协程的使用分析二

又仔细研究了下 Octane 源码和 Swoole 的文档&#xff0c;关于前几天 Laravel Octane 和 Swoole 协程的使用分析中的猜想&#xff0c;得到进一步验证&#xff1a; Swoole 的 HTTP Server 启动后会创建一个 master 进程和一个 manager 进程&#xff1b;master 进程又会创建多个…

XUbuntu22.04之解决:仓库xxx没有数字签名问题(二百一十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Linux 系统安装/卸载 Nginx教程

优质博文&#xff1a;IT-BLOG-CN 一、安装Nginx 【1】首先通过Nginx官网确定需要安装的版本&#xff0c;如果Linux联网则直接在Linux服务上使用wget命令将Nginx安装包下载到/usr/local/目录下&#xff1a; [rootxxx local]# wget -c http://nginx.org/download/nginx-1.22.1.…

qt 5.15版本安装

1.qt5.15版本安装 2.安装慢时&#xff0c;切换到清华镜像源&#xff1a;.\qt-unified-windows-x64-online.exe --mirror https://mirrors.tuna.tsinghua.edu.cn/qt/ 3.没有qt 5.15版本在旁边进行筛选&#xff0c;只选archive

雅马哈伺服器TS-S系列说明具体详情内容可参看PDF目录内容

雅马哈伺服器TS-S系列说明具体详情内容可参看PDF目录内容

c++结构体内存对齐

结构体内存对齐 试试运行下面的例子 #include <stdio.h> #include <stdlib.h>using namespace std;struct A{char c;int i; };struct B{char c; int i; double d; };struct C{char c;int i;double d;char c1; };int main(){printf("sizeof(A): %d\n"…

netlink原理及应用

什么是netlink netlink是一种基于网络的通信机制&#xff0c;允许内核内部、内核与用户态应用之间甚至用户态应用之间进行通信&#xff1b;netlink的主要作用是内核与用户态之间通信&#xff1b;它的思想是&#xff0c;基于BSD的socket使用网络框架在内核和用户态之间进行通信…

CloudCanal x Hive 构建高效的实时数仓

简述 CloudCanal 最近对于全周期数据流动进行了初步探索&#xff0c;打通了Hive 目标端的实时同步&#xff0c;为实时数仓的构建提供了支持&#xff0c;这篇文章简要做下分享。 基于临时表的增量合并方式基于 HDFS 文件写入方式临时表统一 Schema任务级的临时表 基于临时表的…

0基础跨考计算机|408保姆级全年计划

我也是零基础备考408&#xff01; 虽说是计算机专业&#xff0c;但是本科一学期学十几门,真的期末考试完脑子里什么都不进的...基本都是考前一周发疯学完水过考试...&#x1f605; 想要零基础跨考可以直接从王道开始&#xff01;跟教材一点一点啃完全没必要&#x1f978; 现在…

ThreadLocal 为什么会内存泄漏吗?是怎么产生的?

ThreadLocal是什么 ThreadLocalMap 如何避免泄漏 ThreadLocal是什么 ThreadLocal是一个本地线程副本变量工具类。主要用于将私有线程和该线程存放的副本对象做一个映射&#xff0c;各个线程之间的变量互不干扰&#xff0c;在高并发场景下&#xff0c;可以实现无状态的调用&…

vscode 引入外部依赖包

背景 我要在vscode中写一些antlr代码生成的cpp代码&#xff0c;但是在引入头文件#include "antlr4-runtime.h"的时候&#xff0c;出现报错&#xff0c;显示没有这个头文件&#xff0c;显然这是我们没有导入相关的包&#xff0c;因此我首先尝试了将antlr4的依赖源码在…

安全防御综合实验

需求&#xff1a; 1、办公区设备可以通过电信链路和移动链路上网&#xff08;多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换&#xff09; 2、分公司设备可以通过总公司的移动链路和电信链路访问DMZ区的http服务器 3、分公司内部的客户端可以通过公网地址访问到…

node.js和electron安装

文章目录 一、node.js安装1.node.js下载安装2.设置镜像 二、其它问题1.文件夹创建错误2.electron安装错误 一、node.js安装 1.node.js下载安装 参考B站视频node.js安装&#xff0c;没有按视频中设置镜像 2.设置镜像 参考&#xff1a;https://npmmirror.com/ npm config se…

化肥工业5G智能制造工厂数字孪生可视化平台,推进化肥行业数字化转型

化肥工业5G智能制造工厂数字孪生可视化平台&#xff0c;推进化肥行业数字化转型。随着科技的不断发展&#xff0c;数字化转型已经成为各行各业发展的必然趋势。在化肥工业领域&#xff0c;5G智能制造工厂数字孪生可视化平台的应用正在逐渐普及&#xff0c;为行业数字化转型提供…

RV1126芯片概述

RV1126芯片概述 前言1 主要特性2 详细参数 前言 1 主要特性 四核 ARM Cortex-A7 and RISC-V MCU250ms快速开机2.0Tops NPU14M ISP with 3帧 HDR支持3个摄像头同时输入4K H.264/H.265 视频编码和解码 2 详细参数

Hive SQL 开发指南(二)使用(DDL、DML,DQL)

在大数据领域&#xff0c;Hive SQL 是一种常用的查询语言&#xff0c;用于在 Hadoop上进行数据分析和处理。为了确保代码的可读性、维护性和性能&#xff0c;制定一套规范化的 Hive SQL 开发规范至关重要。本文将介绍 Hive SQL 的基础知识&#xff0c;并提供一些规范化的开发指…

GitHub Copilot extension activation error: ‘No access to GitHub Copilot found‘

好不容易学生认证通过了&#xff0c;打开vscode用copilot结果一直报这个错误。我的原因是&#xff1a;还未给copilot授权&#xff0c; 通过了学生认证后要进入这里进行授权&#xff1a;