EChart案例-圆形环比图

2024-08-25 10:48
文章标签 案例 圆形 echart 环比

本文主要是介绍EChart案例-圆形环比图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 效果:

 

配置options:

let data=[{value: 20,name: '水质',itemStyle:{normal: {color:'#40a7e9'}}}, {value: 35,name: '流量',itemStyle:{normal: {color:'#f4c052'}}}, {value: 25,name: '状态',itemStyle:{normal:{color: '#6ed971'}}}, {value: 15,name: '水位',itemStyle:{normal: {color:'#f38051'}}}]let  option = {title: {text: '',},legend:{data:['水质','流量','状态','水位',],bottom:10,left:90,orient:'vertical',itemGap:25,formatter(name){let item=data.find(node=>node.name==name);return ['{title|'+item.name+'}{value|'+item.value+'%}{value|'+item.value+'}'].join('\n')},textStyle:{color:'#fff',fontSize:18,rich: {title: {color: '#73a1b0',align: 'left',fontSize:22,width:165,},value: {color: '#fff',align: 'left',fontSize:26,width:165,fontFamily:'Helvetica'},}}},series: [{z:10,type: 'pie',center:['50%', '35%'],radius: ['45%', '55%'],startAngle: 135,itemStyle : {normal : {label : {show : false},labelLine : {show : false}},},data:data},{ //内圆type: 'pie',center:['50%', '35%'],radius: '40%',itemStyle: {normal: {color: new echarts.graphic.RadialGradient(.5, .5, .8, [{offset: 0,color: '#0a2957'},{offset: .52,color: '#0a2957'},{offset: 1,color: '#71a8ca'}], false),shadowColor: '#71a8ca',shadowBlur: 12,label: {show:true,position:'center',textStyle: {color: '#fff',fontSize: 30,fontWeight:400,},},labelLine: {show: false}},},hoverAnimation: false,label: {show: true,},tooltip: {show: false},data: [{name:'100',value:0}],
},]
};

 

这篇关于EChart案例-圆形环比图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1105349

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一:唯一索引等值锁定存在的数据案例二:

MySQL 表的内外连接案例详解

《MySQL表的内外连接案例详解》本文给大家介绍MySQL表的内外连接,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录表的内外连接(重点)内连接外连接表的内外连接(重点)内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选,我

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,:本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce

Spring Boot 整合 Redis 实现数据缓存案例详解

《SpringBoot整合Redis实现数据缓存案例详解》Springboot缓存,默认使用的是ConcurrentMap的方式来实现的,然而我们在项目中并不会这么使用,本文介绍SpringB... 目录1.添加 Maven 依赖2.配置Redis属性3.创建 redisCacheManager4.使用Sp