Echarts 配置渐变

官方文档：https://echarts.apache.org/zh/option.html#color

实现方式：

 两种不同的写法本质都一样，`echarts.graphic.LinearGradient` 只是封装了一个方法

在数据中配置
将配置写到数据的每个项目中，适用于每个图形都需要配置单独的渐变情况。

关键代码

color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [// 百分之0状态之下的颜色值{offset: 0,color: '#5052EE'},// 百分之100状态之下的颜色值{offset: 1,color: '#AB6EE5'}
])

完整代码

series: [{type: 'bar',showBackground: true,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' },{ offset: 0.5, color: '#188df0' },{ offset: 1, color: '#188df0' }])},data: data}]
}

在颜色选项中配置

color:[{// 渐变的类型type: 'linear', // 渐变方向x: 0, y: 0,x2: 0,y2: 1,// 渐变的配置colorStops: [{offset: 0, color: colorsValue[0] // 0% 处的颜色}, {offset: 1, color: colorsValue[1] // 100% 处的颜色}],global: false // 缺省为 false}
]

Echarts 配置渐变相关推荐

echarts配置多个y轴
echarts配置多个y轴的时候,需要加上: yAxisIndex: 1 1 { 2 name:'来水增量累积(mm)', 3 type:'line', 4 stack: '总量', 5 yAxisI ...
echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
echarts配置及专业k线作图工具
一般看官网配置比较多,教大家如何copy完线性图代码,快速更改配置. echerts线图常用配置: grid: [{left: '0%',right: '5%',top: '5%',height: ' ...
echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
echarts配置详解
文章目录配置 color颜色 grid网格配置 legend图例组件 series系列 title图标标题 tooltip提示框 toolbox工具箱组件 xAxis(X轴).yAxis(y轴) 资 ...
使用echarts配置中国地图
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
echarts 柱状图渐变
1.竖向柱状图渐变(加粗部分)效果如图 series: [ { type: 'bar', showBackground: true, itemStyle: ...
echarts柱状图渐变堆叠柱状图渐变小程序 vue
echarts堆叠柱状图渐变官网实例堆叠柱状图堆叠渐变柱状图 import * as echarts from '../../ec-canvas/echarts'; //微信小程序需引用,其他正 ...
ECharts配置手册的使用及常用术语
前言: 授人以鱼,不如授人以渔.ECharts中的配置项非常多,开发者很难记忆所有的配置项,而其又是开发时需要配置的重要内容.为了在绘制图表时,能够方便.快速地查询所需要的配置项内容,需要了解ECha ...
Vue中ECharts配置和使用自定义主题（超简单，包教会）
配置样式这里介绍两种方式,小伙伴们看个人情况选择 1.采用最简单的方式配置的样式参考Echarts官网点我直达Echarts官网, // theme.json {"default&qu ...

Echarts 配置渐变

官方文档：https://echarts.apache.org/zh/option.html#color

实现方式：

Echarts 配置渐变相关推荐

最新文章

热门文章