漏刻有时数据可视化Echarts组件开发(42)渐变色的应用

本文主要是介绍漏刻有时数据可视化Echarts组件开发(42)渐变色的应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

option = {backgroundColor: "#000",legend: {top: "0",itemWidth: 5,itemHeight: 5,textStyle: {color: "#FFFFFF",},icon: "circle",},grid: {left: "50px",top: "50px",right: "12px",bottom: "12px",containLabel: true,},xAxis: {type: "value",splitLine: {show: false,lineStyle: {color: "rgba(255,255,255,0.3)",},},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,color: "#FFFFFF",},},yAxis: {type: "category",data: ["其他", "消防", "烟草", "农林", "交通", "教育", "文化", "卫生"],nameLocation: "end", // 轴名称相对位置valuenameTextStyle: {// 坐标轴名称样式color: "#fff",padding: [5, 0, 0, 5], // 坐标轴名称相对位置},nameGap: 200, // 坐标轴名称与轴线之间的距离axisLine: {show: false,lineStyle: {color: "rgba(255,255,255,0.3)",},},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {margin: 15,color: "#03FFFB",},},color: ["#6046D1","#4B4CF9","#4C80E8","#4C80E8","#43A1FF","#59C8FF","#36BED9","#39DADA","#4CE8CE","#43FFC0","#9BFFAC","#DFFF94","#F3FFC6",],series: [{name: "南京",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "无锡",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "苏州",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "常州",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "镇江",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "扬州",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "泰州",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "南通",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "盐城",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "淮安",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "宿迁",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "徐州",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},{name: "连云港",type: "bar",stack: "Tik Tok",barWidth: 6,itemStyle: {normal: {borderColor: "#00052C",borderWidth: 2,},},label: {normal: {show: true,position: "insideRight",offset: [-20, -12],formatter: "{c}",textStyle: {align: "center",baseline: "middle",fontSize: 12,fontWeight: "400",color: "#fff",},},},data: [220, 230, 250, 260, 280, 290, 300, 310],},],
};

参见:makeAPie


@漏刻有时

这篇关于漏刻有时数据可视化Echarts组件开发(42)渐变色的应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)

《使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)》在现代软件开发中,处理JSON数据是一项非常常见的任务,无论是从API接口获取数据,还是将数据存储为JSON格式,解析... 目录1. 背景介绍1.1 jsON简介1.2 实际案例2. 准备工作2.1 环境搭建2.1.1 添加

MySQL中删除重复数据SQL的三种写法

《MySQL中删除重复数据SQL的三种写法》:本文主要介绍MySQL中删除重复数据SQL的三种写法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下... 目录方法一:使用 left join + 子查询删除重复数据(推荐)方法二:创建临时表(需分多步执行,逻辑清晰,但会

Java实现任务管理器性能网络监控数据的方法详解

《Java实现任务管理器性能网络监控数据的方法详解》在现代操作系统中,任务管理器是一个非常重要的工具,用于监控和管理计算机的运行状态,包括CPU使用率、内存占用等,对于开发者和系统管理员来说,了解这些... 目录引言一、背景知识二、准备工作1. Maven依赖2. Gradle依赖三、代码实现四、代码详解五

在Ubuntu上部署SpringBoot应用的操作步骤

《在Ubuntu上部署SpringBoot应用的操作步骤》随着云计算和容器化技术的普及,Linux服务器已成为部署Web应用程序的主流平台之一,Java作为一种跨平台的编程语言,具有广泛的应用场景,本... 目录一、部署准备二、安装 Java 环境1. 安装 JDK2. 验证 Java 安装三、安装 mys

详谈redis跟数据库的数据同步问题

《详谈redis跟数据库的数据同步问题》文章讨论了在Redis和数据库数据一致性问题上的解决方案,主要比较了先更新Redis缓存再更新数据库和先更新数据库再更新Redis缓存两种方案,文章指出,删除R... 目录一、Redis 数据库数据一致性的解决方案1.1、更新Redis缓存、删除Redis缓存的区别二

Redis事务与数据持久化方式

《Redis事务与数据持久化方式》该文档主要介绍了Redis事务和持久化机制,事务通过将多个命令打包执行,而持久化则通过快照(RDB)和追加式文件(AOF)两种方式将内存数据保存到磁盘,以防止数据丢失... 目录一、Redis 事务1.1 事务本质1.2 数据库事务与redis事务1.2.1 数据库事务1.

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

Oracle Expdp按条件导出指定表数据的方法实例

《OracleExpdp按条件导出指定表数据的方法实例》:本文主要介绍Oracle的expdp数据泵方式导出特定机构和时间范围的数据,并通过parfile文件进行条件限制和配置,文中通过代码介绍... 目录1.场景描述 2.方案分析3.实验验证 3.1 parfile文件3.2 expdp命令导出4.总结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一