Echarts折线图中数据根据正负数显示不同区域背景色-配置

本文主要是介绍Echarts折线图中数据根据正负数显示不同区域背景色-配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

示例

 

Echarts折线图中数据根据正负数显示不同区域背景色 

  •  Piecewise 分段类型
  • Continuous 连续类型

Echarts配置

option = {backgroundColor: "#030A41",xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {show: false,},axisLabel: {  //设置x轴坐标配置margin: 10,color: '#fff',  textStyle: {fontSize: 14},},},yAxis: {   //设置y轴坐标配置type: 'value',splitLine: {   show: true,  lineStyle: {color: '#132987',},},axisLabel: {  margin: 10,color: '#fff',  //y轴坐标文字颜色设置   textStyle: {fontSize: 14},},},visualMap: [{type: 'piecewise',show: false,pieces: [{lte: 0,   //数据<0配置color: 'rgba(255, 87, 87, 0.3)',  //设置区域背景色},{gte: 0.1,  //数据>0配置color: 'rgba(69, 215, 224, 0.3)',  //设置区域背景色},],seriesIndex: 0,},],series: [{data: [100,-100, -200, 224, 147, -260,100,200],type: 'line',smooth: true,symbol: 'none', //'circle' 圆点sampling: 'average',areaStyle: {}// itemStyle: {//   normal: {//     lineStyle: {//       width: 2,//       color: '#9DD3E8'//     }//   }// }}]
};

 完整使用

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {backgroundColor: '#030A41',xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {show: false},axisLabel: {//设置x轴坐标配置margin: 10,color: '#fff',textStyle: {fontSize: 14}}},yAxis: {//设置y轴坐标配置type: 'value',splitLine: {show: true,lineStyle: {color: '#132987'}},axisLabel: {margin: 10,color: '#fff', //y轴坐标文字颜色设置textStyle: {fontSize: 14}}},visualMap: [{type: 'piecewise',show: false,pieces: [{lte: 0, //数据<0配置color: 'rgba(255, 87, 87, 0.3)' //设置区域背景色},{gte: 0.1, //数据>0配置color: 'rgba(69, 215, 224, 0.3)' //设置区域背景色}],seriesIndex: 0}],series: [{data: [100, -100, -200, 224, 147, -260, 100, 200],type: 'line',smooth: true,symbol: 'none', //'circle' 圆点sampling: 'average',areaStyle: {}// itemStyle: {//   normal: {//     lineStyle: {//       width: 2,//       color: '#9DD3E8'//     }//   }// }}]
};option && myChart.setOption(option);

这篇关于Echarts折线图中数据根据正负数显示不同区域背景色-配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分