echars设置渐变颜色的方法

        在我们日常的开发中,难免会遇到有需求,需要使用echars设置渐变的图表,如果我们需要设置给图表设置渐变颜色的话,我们只需要在 series 配置项中 添加相应的属性配置项即可。

方式一:colorStops 

  • type:‘linear’,线性渐变
  • x,y,x2,y2,代表包围框中的百分比,数值范围 0-1;

代码实例  注意:这个color 是配置在 series  内的

        color: {
          type: 'linear', // 表示线性渐变
          //代表包围框中的百分比,数值范围 0-1
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              //23, 82, 233
              color: 'rgba(23, 82, 233,1)' // 0% 处的颜色
            },
            {
              //7, 158, 228
              offset: 0.8,
              color: 'rgba(7, 158, 228,1)' // 80% 处的颜色
            }
          ]
        },

方式二:new echarts.graphic.LinearGradient((x,y,x2,y2

  • x,y,x2,y2,包围框中的百分比,数值范围 0-1;
  • offset,类似颜色线性梯度,数值范围 0-1;

代码实例  这个itemStyle是配置在 series  内的

        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0.5, // 50%位置的颜色
              color: 'rgba(252, 154, 48, 1)'
            },
            {
              offset: 0, // 0%位置的颜色
              color: 'rgba(246, 248, 252, 1)' //渐变颜色
            }
          ])
        },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

this关键字

this 文章目录 this引出Thisthis的作用this.属性内存分析 this.方法名this()构造方法 概念:this 关键字是 Java常用的关键字,可用于任何实例方法内指向当前对象,也可指向对其调用当前方法的对象,可以将this理解为一个指…

被问了n遍的小程序地理位置权限开通方法

小程序地理位置接口有什么功能? 在平时我们在开发小程序时,难免会需要用到用户的地理位置信息的功能,小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( getLocation ),但是在代码中却使用到了相关接口&#…

【3dmax笔记】023:阵列工具(移动+一维+二维+三维)

文章目录 一、阵列工具二、案例演示 一、阵列工具 【阵列】命令将显示【阵列】对话框,使用该对话框可以基于当前选择创建对象阵列。 菜单栏:【工具】菜单 > 【阵列】 二、案例演示 首先,画一个物体,如茶壶,如下图…

Ps 中 曲线和色阶的区别在哪里?

【官方解释】 在Photoshop中,曲线(Curves)和色阶(Levels)是两种调整图像色调和对比度的工具,它们有一些相似之处,但也有一些重要的区别。 调整方式: 曲线(Curves)&…

04-19 周四 GitHub CI 方案设计

04-19 周四 GitHub CI 方案设计 时间版本修改人描述2024年4月19日14:44:23V0.1宋全恒新建文档2024年4月19日17:22:57V1.0宋全恒完成部署拓扑结构的绘制和文档撰写 简介 需求 由于团队最近把代码托管在GitHub上,为解决推理、应用的自动化CI的需要,调研了…

【C语言刷题系列】移除元素

目录 一、问题描述 二、解题思路 三、源代码 个人主页: 倔强的石头的博客 系列专栏 :C语言指南 C语言刷题系列 一、问题描述 二、解题思路 在C语言中,原地移除数组中所有等于特定值的元素并返回新长度的问题可以通过双指针法…

虚拟化之---virtio通信

一、理解virtio的背景 我们知道虚拟化hypervisor大的类型分为两种,全虚拟化和半虚拟化。 在全虚拟化的解决方案中,guest VM 要使用底层 host 资源,需要 Hypervisor 来截获所有的请求指令,然后模拟出这些指令的行为,这样…

python-dict序列化的数据为啥前后不一致

前情提要及背景:流式数据的二次处理终结篇-CSDN博客 假如直接将dict进行str,那么编码数据都是一致的,但是在postman上就表现不那么好看,如下: 而之前的显示如下: 其中的差别就是单引号与双引号的差别了。 采用如下方案无疑是最笨的方法了: 在Python中,如果你想将处理…

各城市-人口就业和工资数据(1978-2022年)

这份数据收集了1978年至2022年间300多个地级市的人口、就业和工资等数据。涵盖的指标包括从业人员数量、平均工资水平、人口密度等,通过这些数据可以深入了解中国各地城市的人口结构、就业状况以及工资水平的变化趋势。这些数据对于研究城市发展、劳动力市场以及区域…

微积分 --- 偏导数,方向导数与梯度(二)

方向导数 上图为一温度图,所反映的是加利福利亚洲和内华达州在十月的一天下午三点的温度。其中,图中的每一点都是温度T关于x,y的函数,即T(x,y)。对于图中的Reno市而言,沿着x方向的偏导反映的是温度沿着x方向,即沿着东方…

【搜索技能】外链

文章目录 前言一、外链是什么?二、如何进行外链调查?总结 前言 今儿因为在搜索一个很感兴趣的软件,但是软件信息所在的网址非常有限。因此产生了一个念头:我能不能找到所有的包含了或者是引用了这个网站的网站呢? 调查之下&…

五道链表习题,只过思路

建议先过一遍:保研机试前的最后七道链表题-CSDN博客 第一题 82. 删除排序链表中的重复元素 II - 力扣(LeetCode) 是不是似曾相识的感觉,好像数组顺序去重,请看:保研机试前的最后七道数组题-CSDN博客 第二…

幻兽帕鲁游戏主机多少钱?幻兽帕鲁游戏服务器一个月仅需32元

随着游戏产业的蓬勃发展,腾讯云紧跟潮流,推出了针对热门游戏《幻兽帕鲁Palworld》的专属游戏服务器。对于广大游戏爱好者来说,这无疑是一个激动人心的消息。那么,腾讯云幻兽帕鲁游戏主机到底多少钱呢?让我们一起来揭晓…

编程基础学什么课程内容

编程基础学习的课程内容有:程序设计基础、算法与数据结构、计算机科学原理、面向对象编程、网页开发基础等课程内容,以下是上大学网 (www.sdaxue.com)整理的具体课程或技能领域内容,供大家参考! 程序设计基础(或计算机…

重学java 29.经典接口

光阴似箭,我好像跟不上 —— 24.5.6 一、java.lang.Comparable 我们知道基本数据类型的数据(除boolean类型外)需要比较大小的话,直接使用比较运算符即可,但是引用数据类型是不能直接使用比较运算符来比较大小的。那么,如何解决这个…

Vue MVVM这一篇就够啦!

Vue vs React 相似之处: 它们都有使用 Virtual DOM虚拟DOM-CSDN博客;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。R…

数塔问题(蛮力算法和动态规划)

题目:如下图是一个数塔,从顶部出发在每一个节点可以选择向左或者向右走,一直走到底层,要求找出一条路径,使得路径上的数字之和最大,及路径情况。(使用蛮力算法和动态规划算法分别实现) #include…

AI预测福彩3D第10套算法实战化赚米验证第2弹2024年5月6日第2次测试

由于今天白天事情比较多,回来比较晚了,趁着还未开奖,赶紧把预测结果发出来吧~今天是第2次测试~ 2024年5月6日福彩3D预测结果 6-7码定位方案如下: 百位:3、4、1、7、8、9 十位:4、5、3、7、8、9 个位&#x…

# 怎么关闭 win10 系统中自带的【文件预览】功能?关闭WIN10【文件预览】功能的方法

怎么关闭 win10 系统中自带的【文件预览】功能?关闭WIN10【文件预览】功能的方法 win10 系统中自带的【文件预览】功能,默认是开启状态的,如果需要关闭它,一步搞定。 1、打开电脑文件浏览器,随便进入有文件的一个文件…

《QT实用小工具·五十五》带有标签、下划线的Material Design风格输入框

1、概述 源码放在文章末尾 该项目实现了一个带有标签动画、焦点动画、正确提示、错误警告的单行输入框控件。下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef LABELEDEDIT_H #define LABELEDEDIT_H#include <QObject> #include <QWidget>…
最新文章