当前位置: 首页 > news >正文

echars设置渐变颜色的方法

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

方式一:colorStops 

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

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

        color: {type: 'linear', // 表示线性渐变//代表包围框中的百分比,数值范围 0-1x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,//23, 82, 233color: 'rgba(23, 82, 233,1)' // 0% 处的颜色},{//7, 158, 228offset: 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.lryc.cn/news/342827.html

相关文章:

  • SpringBoot3项目打包和运行
  • Spring Cloud Gateway的部署
  • 算法提高之树的最长路径
  • git/gerrit使用遇到的问题
  • 机器学习第二天(监督学习,无监督学习,强化学习,混合学习)
  • Rust 解决循环引用
  • ICC2:如何解决pin density过高引起的绕线问题
  • Buuctf-Misc题目练习
  • 费马小定理详解
  • PXE批量安装
  • stm32f103c8t6最小系统板
  • QCefView 在 Linux 下的编译(更新)
  • 无卤素产品是什么?有什么作用?
  • esp32-cam 1. 出厂固件编译与测试
  • 题目:线性代数
  • docker学习笔记3:VmWare CentOS7安装与静态ip配置
  • leetcode 547.省份数量
  • Qt5 框架学习及应用 — 对象树
  • Ansible自动化运维工具---Playbook
  • 什么是接口和类?Java中的集合框架有哪些主要接口和类?
  • 算法学习笔记(最短路——Bellman-Ford)
  • try-catch-finally的省略与springboot
  • 容器Docker:轻量级虚拟化技术解析
  • windows 系统中cuda 12.1 环境安装
  • 字节和旷视提出HiDiffusion,无需训练,只需要一行代码就可以提高 SD 生成图像的清晰度和生成速度。代码已开源。
  • linux下dd制作启动U盘
  • springboot整合mybatis配置多数据源(mysql/oracle)
  • 练习项目后端代码解析切面篇(Aspect)
  • TypeScript常见面试题第六节
  • LeetCode 面试经典150题 228.汇总区间