echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）

配置效果

配置每个柱子不同颜色的代码

itemStyle: {normal: {// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'red'                   //指0%处的颜色}, {offset: 1, color: 'blue'                 //指100%处的颜色}], false)}
}

完整代码

// 指定图表的配置项和数据var option = {title: {text: '碳排放量(tCO2e)',textStyle: {color: '#fff',fontSize: 14,fontWeight: 400,fontFamily: 'Microsoft YaHei'}},tooltip: {},xAxis: {data: ['常减压', '2#常', '催化', '重加'],axisLine: {show: true,lineStyle: {color: "#CBEDFF"},},axisTick: {show: false //y轴坐标点消失},},yAxis: {type: 'value',//   show:false,axisLine: {show: false, //y轴线消失lineStyle: {color: "#CBEDFF"},},axisTick: {show: false //y轴坐标点消失},splitNumber: 10,splitLine: {show: true,lineStyle: {color: "#006691"}},},series: [{name: '碳排放量',type: 'bar',data: [3500, 2000, 1800, 1600],backgroundStyle: {color: '#00FCFF'},barWidth: 21,itemStyle: {normal: {// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'red'                   //指0%处的颜色}, {offset: 1, color: 'blue'                 //指100%处的颜色}], false)}
}}]};

配置每个柱子的渐变颜色

itemStyle: {normal: {//柱体的颜色//右，下，左，上（1，0，0，0）表示从正右开始向左渐变color: function (params) {console.log(params);var colorList = [['#00FCFF', '#008297'],['#0091FF', '#005EA4'],['#901698', '#F157EE'],['#40FBCB', '#009871']];var colorItem = colorList[params.dataIndex];return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: colorItem[0]},{offset: 1,color: colorItem[1]}], false);}}},

完整代码

  // 指定图表的配置项和数据var option = {title: {text: '碳排放量(tCO2e)',textStyle: {color: '#fff',fontSize: 14,fontWeight: 400,fontFamily: 'Microsoft YaHei'}},tooltip: {},xAxis: {data: ['常减压', '2#常', '催化', '重加'],axisLine: {show: true,lineStyle: {color: "#CBEDFF"},},axisTick: {show: false //y轴坐标点消失},},yAxis: {type: 'value',//   show:false,axisLine: {show: false, //y轴线消失lineStyle: {color: "#CBEDFF"},},axisTick: {show: false //y轴坐标点消失},splitNumber: 10,splitLine: {show: true,lineStyle: {color: "#006691"}},},series: [{name: '碳排放量',type: 'bar',data: [3500, 2000, 1800, 1600],backgroundStyle: {color: '#00FCFF'},barWidth: 21,itemStyle: {normal: {//柱体的颜色//右，下，左，上（1，0，0，0）表示从正右开始向左渐变color: function (params) {console.log(params);var colorList = [['#00FCFF', '#008297'],['#0091FF', '#005EA4'],['#901698', '#F157EE'],['#40FBCB', '#009871']];var colorItem = colorList[params.dataIndex];return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: colorItem[0]},{offset: 1,color: colorItem[1]}], false);}}},}]};

echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）相关推荐

183：vue+openlayers 设置线段样式：粗细、渐变颜色、箭头及线头样式
第183个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中修饰线段的样式.绘制两个线段,利用FlowLine的样式规则来设置矢量线段粗细.渐变颜色,设置箭头和线头样式. ...
echart图居左_怎么让ECharts图表向左移动起来？
1. 怎么让ECharts图表向左移动起来? 上一篇写到可以通过设置dataZoom属性,处理数据太多的情况下图表的展示.有时候我们可能需要让图表有一个从右向左的动态效果,让图表看起来不那么单调.其实 ...
Qt Qss 渐变颜色设置
1.渐变颜色设置有:qlineargradient(线性渐变颜色设置),qradialgradient(辐射渐变),qconicalgradient(圆锥形渐变). QLinearGradient:显 ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
Echarts图表之线性图、柱形图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放
文章目录 echarts中设置x轴和y轴均随滚轮进行缩放当数据实时渲染时,也可进行区域缩放 echarts中设置x轴和y轴均随滚轮进行缩放 dataZoom 组件用于区域缩放,从而能自由关注细节的 ...
echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...
ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...

echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）

配置效果

配置每个柱子不同颜色的代码

完整代码

配置每个柱子的渐变颜色

完整代码

echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）相关推荐

最新文章

热门文章