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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

x-cmd pkg | jless - 受 Vim 启发的命令行 JSON 查看器

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 jless 是一个命令行 JSON 查看器&#xff0c;设计用于读取、探索和搜索 JSON 数据。可以使用它来替代 less 、 jq 、 cat 以及您当前用于查看 JSON 文件的编辑器的任何组合。它是用 Rust 编写的&#xff0c;可以作为单…

启动SpringBoot报错:No more pattern data allowed after {*...} or ** pattern element

报错信息 [AbstractApplicationContext.java:592] → [Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.BeanCreationException: Error creating bean with name viewControllerHandlerMapping defin…

vcs makefile

主要参考&#xff1a; VCS使用Makefile教程_vcs makefile-CSDN博客https://blog.csdn.net/weixin_45243340/article/details/129255218?ops_request_misc%257B%2522request%255Fid%2522%253A%2522170524049516800227431373%2522%252C%2522scm%2522%253A%252220140713.1301023…

ssm基于Web的数字家庭网站设计与实现论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

竞赛练一练 第28期:GESP和电子学会相关题目练习

CIE一级2023.03_足球射门练习 1. 准备工作 &#xff08;1&#xff09;选择背景Soccer&#xff0c;Soccer 2&#xff1b; &#xff08;2&#xff09;保留默认小猫角色&#xff0c;添加角色&#xff1a;Soccer Ball&#xff1b; &#xff08;3&#xff09;给Soccer Ball添加声…

OSPF : 区域 / 为什么非骨干互访需要经过骨干

概述 OSPF系列第二篇 , 今天来围绕着区域这个概念展开写一篇博客 分区背景 先来讨论一下技术背景 , 也就是为什么要分区 ? 所有设备都在一个区域不行吗 会有什么问题呢 . 首先明确一个知识点 : 正常状态下一个区域内的所有设备的LSDB都是一样的.区域内的路由器必须为所属的…

BikeDNA(八)外在分析:OSM 与参考数据的比较2

BikeDNA&#xff08;八&#xff09;外在分析&#xff1a;OSM 与参考数据的比较2 1.数据完整性 见链接 2.网络拓扑结构 见链接 3.网络组件 本节仔细研究两个数据集的网络组件特征。 断开连接的组件不共享任何元素&#xff08;节点/边&#xff09;。 换句话说&#xff0c;…

庆祝一年的成长

本文字数&#xff1a;2288&#xff1b;估计阅读时间&#xff1a;6 分钟 作者&#xff1a;ClickHouse Team 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 随着今年即将结束&#xff0c;我们想要向您表达衷心的感谢&#xff0c;感谢您…

cad二次开发autolisp(一)

文章目录 一、概述1.1 简介1.2 打开编辑器1.3 调试页面 二、数据类型三、函数3.1 用户函数 四、语句4.1 常规语句4.2 流程控制语句 五、图元操作5.1 定义5.2 图元选择5.3 图元属性列表 一、概述 1.1 简介 简介&#xff1a;cad 二次开发语言&#xff0c;后缀名*.lsp适用于编写…

排序算法7----归并排序(C语言)

1、基本思想 归并排序是建立在归并操作上的一种有效的排序算法&#xff0c;该算法是采用分治法的一个非常典型的应用。 将无序的序列分解到单个元素&#xff0c;然后将有序的子序列合并&#xff0c;得到完全有序的序列&#xff1a;即先使每个子序列有序&#xff0c;再使子序列段…

React16源码: React中的异步调度scheduler模块以及时间片源码实现

React Scheduler 1 ) 概述 react当中的异步调度&#xff0c;称为 React Scheduler发布成单独的一个 npm 包就叫做 scheduler这个包它做了什么&#xff1f; A. 首先它维护时间片B. 然后模拟 requestIdleCallback 这个API 因为现在浏览器的支持不是特别的多所以在浏览当中只是去…

使用scipy处理图片——旋转任意角度

大纲 载入图片左旋转30度&#xff0c;且重新调整图片大小右旋转30度&#xff0c;且重新调整图片大小左旋转135度&#xff0c;保持图片大小不变右旋转135度&#xff0c;保持图片大小不变 在《使用numpy处理图片——90度旋转》中&#xff0c;我们使用numpy提供的方法&#xff0c;…

命令行登录Mysql的详细讲解

目录 前言1. 本地登录2. 远程登录3. 拓展 前言 对于命令行登录Mysql一般都是用mysql -u root -p 但对于如何远程登陆&#xff0c;一直其他的参数还是有些盲区&#xff0c;对此总结科普 对于登录过程中出现的问题&#xff0c;可看我之前的文章&#xff1a; 服务器 出现ERROR …

【矩阵快速幂】封装类及测试用例及样例

作者推荐 视频算法专题 通俗的说&#xff0c;就是矩阵的乘方。 封装类 核心代码 class CMat { public:// 矩阵乘法static vector<vector<long long>> multiply(const vector<vector<long long>>& a, const vector<vector<long long>…

Python 面向对象之元类

Python 面向对象之元类 【一】一切皆对象 【1】元类 元类&#xff08;metaclass&#xff09;是Python中用于创建类的类。在Python中&#xff0c;类是对象&#xff0c;而元类就是类的类它们控制类的创建过程&#xff0c;允许你定制类的行为Python中内置的默认元类是type我们用…

Rust-语句和表达式

if-else Rust中if-else表达式的作用是实现条件分支。if-else表达式的构成方式为&#xff1a;以if关键字开头&#xff0c;后面跟上条件表达式&#xff0c;后续是结果语句块&#xff0c;最后是可选的else块。条件表达式的类型必须是bool。 if-else结构还可以当表达式使用 loop …

如何用LLM和自有知识库搭建智能agent?

用LangChain建立知识库&#xff0c;文末中也推荐其他方案。 项目源码&#xff1a;ChatPDF实现 LangChain Indexes使用 对加载的内容进行索引&#xff0c;在indexes中提供了一些功能&#xff1a; Document Loaders&#xff0c;加载文档Text Splitters&#xff0c;文档切分V…

开发实践5_后台管理^/ 分_页器

以下学习 朔宁夫 开发课 。&#xff08;Python&#xff09; 一 基本使用 创建超级用户 terminal // python manage.py createsuperuser 访问地址 //Log in | Django site adminhttp://127.0.0.1:8000/admin/login/?next/admin/ superuserr login django自带admin功能。其…

一文读懂「Prompt Engineering」提示词工程

在了解提示过程之前&#xff0c;先了解一下什么是提示prompt&#xff0c;见最后附录部分 一、什么是Prompt Engingering&#xff1f; 提示工程&#xff08;Prompt Engingering&#xff09;&#xff0c;也被称为上下文提示&#xff08;In-Context Prompting&#xff09;&#x…

Django项目中的默认文件都有什么用

manager.py&#xff1a; 是django用于管理本项目的命令行工具&#xff0c;之后进行站点运行&#xff0c;数据库自动生成等都是通过本文件完成。 djangoStudy/__init__.py&#xff1a; 告诉python该目录是一个python包&#xff0c;暂无内容&#xff0c;后期一些工具的初始化可…