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

相关文章

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

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

如何使用 Python 读取 Excel 数据

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

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

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

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

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

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

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

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

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