漏刻有时数据可视化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

相关文章

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

C语言中位操作的实际应用举例

《C语言中位操作的实际应用举例》:本文主要介绍C语言中位操作的实际应用,总结了位操作的使用场景,并指出了需要注意的问题,如可读性、平台依赖性和溢出风险,文中通过代码介绍的非常详细,需要的朋友可以参... 目录1. 嵌入式系统与硬件寄存器操作2. 网络协议解析3. 图像处理与颜色编码4. 高效处理布尔标志集合

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字