ECharts color属性设置(不透明度,透明度,线性渐变,径向渐变,扇形渐变,纹理填充)
1 不透明度
1.1 颜色英文名
示例:
color:'red'
1.2 十六进制格式
有两种表示方式。
第一种为#+6位十六进制数,前2位表示红色,中间2位表示绿色,后2位表示蓝色。
第二种为#+3位十六进制数,第1位表示红色,第2位表示绿色,第3位表示蓝色。
示例:
color:"#ccc",
color:"#cccccc"
1.3 rgb
rgb()方法的第2个参数表示红色,第2个参数表示绿色,第3个参数表示蓝色。
color:'rgb(128, 128, 128)'
2 rgba(透明度)
rgb()方法的第2个参数表示红色,第2个参数表示绿色,第3个参数表示蓝色,第4个参数表示透明度,1为不透明,0表示透明。
color:'rgba(128, 128, 128,1)'
3 线性渐变
3.1 LinearGradient
color: [ //仪表盘背景颜色渐变[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0.1,color: "#fd2100"},{offset: 0.6,color: "#d09f00"},{offset: 1,color: "#26fd00"}]);]
],
3.2 linear
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false
}
4 径向渐变
4.1 RadialGradient
color:new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{offset: 0,color: '#f7f8fa'
}, {offset: 1,color: '#cdd0d5'
}]),
4.2 radial
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false
}
5 扇形渐变
示例:
color: [[0.1, 'red'],[0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: 'red'}, {offset: 0.8,color: 'rgb(235,205,6)'}])],[0.7, 'rgb(235,205,6)'],[0.9, new echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: 'rgb(13,211,97)'}, {offset: 0.6,color: 'rgb(235,205,6)'}])],[1, 'rgb(13,211,97)']
],
效果图:
6 纹理填充
// 纹理填充
color: {image: document.getElementById('bg_img'), // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
<img src="bg.png" id="bg_img" style="display:none" />
旭东怪的个人空间_哔哩哔哩_Bilibili旭东怪,人生低谷不可怕,可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili,你感兴趣的视频都在B站。https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0
ECharts color属性设置(不透明度,透明度,线性渐变,径向渐变,扇形渐变,纹理填充)相关推荐
- 百度echarts图表属性设置大全
目录 1. backgroundColor 全图默认背景 2.color 默认色板 3.title 图表标题 4.legend 图例 5.dataRange 值域 6.toolbox 工具栏 7.to ...
- echarts 树图属性设置
树图属性自定义 myChart.showLoading(); $.get('data/asset/data/flare.json', function (data) { myChart.hid ...
- echarts饼图属性设置-饼图中间设置总和
源码 option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient ...
- echarts 图例属性设置
legend: {show: true, //是否显示type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例zlevel: 1 ...
- ECharts position属性设置(外部、内部、自定义位置)
1 外部 1.1 top(外部正上方) 可应用于:series.label.position. position:top 1.2 bottom(外部正下方) 可应用于:series.label.pos ...
- 设置CSS透明度的方法
一.css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha(不透明度)三个单词的缩写.RGBA颜色值是RG ...
- HTML学习笔记之CSS属性设置(一)
一.设置字体样式 1.字体属性 1),font-family(字体系列) 本属性描述了用何种字体系列来显示文字,可以为文字指定一种或多种字体,属性值为用逗号分隔的字体名称列表. 例如: p{font- ...
- css样式如何设置边框,阴影,渐变等特效以及通过box-sizing属性设置盒子模型,背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...
- Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
最新文章
- 为ML开发、部署提供靠谱的系统工程方法,NASA、牛津、微软等多家机构提出MLTRL框架
- 任务和特权级保护(二)——《x86汇编语言:从实模式到保护模式》读书笔记32
- AI领域人才,做什么工作可以年薪百万?
- Spring工作原理分析
- “云原生全家桶“KubeSphere 如何让企业从容迈进云原生时代?
- 调试wifi简单记录
- linux如何搭建sftp服务器
- linux系统安装java环境_linux系统java环境配置
- 计算机程序运行异常处理,Win7电脑运行程序出现appcrash错误怎么解决?
- 【NLP】LSTM 唐诗生成器 pytorch 版
- 入门编程(小白写代码的神器)
- 【只摘金句】Linux开发模式带给我们的思考
- “回复TD即可退订” 是真的吗?
- 8个视频素材网站,免费可商用,视频剪辑必备。
- android avm灰色,APICloud AVM多端开发案例深度解析(上)--点餐app开发
- Move Semantics and Perfect Forwarding in C++11
- 服务器能用系统急救箱吗,360急救(乱用360系统急救箱后果)
- Millumin 3 for mac(专业视频编辑软件)
- [小笑话]林蛋大与楚中天
- python基于django幼儿园管理系统