echarts堆叠柱状图渐变

官网实例 堆叠柱状图 堆叠渐变柱状图

import * as echarts from '../../ec-canvas/echarts'; //微信小程序需引用，其他正常引用echarts let chart = null; let base = [12, 45, 72, 26, 36]; //数据 let low = [], //范围值低 normal = [], //范围值正常 high = [], //范围值高 warning = []; //范围值警告 base.forEach((e, i) = >{ if (e < 20) { low[i] = e } if (e < 40) { normal[i] = e } if (e < 60) { high[i] = e } if (e < 80) { warning[i] = e } }) function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, confine: true }, grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel: true }, xAxis: [{ type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }], yAxis: [{ type: 'category', axisTick: { show: false }, data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信'], axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }], series: [ /* 范围值低 */ { name: 'low', type: 'bar', // 折线图 barWidth: 30, //柱体宽度 stack: 'a', //分组 data: low, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#009944' }, { offset: 0.5, color: '#4EDD8E' }, ]) }, }, /* 范围值正常 */ { name: 'normal', type: 'bar', barWidth: 30, stack: 'a', data: normal, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFAE04' }, { offset: 0.5, color: '#FFD630' }, ]) }, }, /* 范围值高 */ { name: 'high', type: 'bar', barWidth: 30, stack: 'a', data: high, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF9294' }, { offset: 0.5, color: '#FFC17F' }, ]) }, }, /* 范围值超出警告 */ { name: 'warn', type: 'bar', barWidth: 30, stack: 'a', data: warning, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#DD352A' }, { offset: 0.5, color: '#F27269' }, ]) }, }] }; chart.setOption(option); return chart; }

echarts柱状图分级多色渐变

import * as echarts from '../../ec-canvas/echarts'; let chart = null; var base = [10, 45, 72, 26, 90]; function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, confine: true }, grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel: true }, xAxis: [{ type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }], yAxis: [{ type: 'category', axisTick: { show: false }, data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信'], axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }], series: [ { name: 'low', type: 'bar', // 折线图 barWidth: 30, //柱体宽度 stack: 'bar', //分组 data: base, itemStyle: { normal: { color: function(params) { let colorList = []; let value = params.value; if (value > 0 && value <= 20) { colorList = ['#009944', '#4EDD8E'] } if (value > 20 && value <= 40) { colorList = ['#FFAE04', '#FFD630'] } if (value > 40 && value <= 60) { colorList = ['#FF9294', '#FFC17F'] } if (value > 60 && value <= 80) { colorList = ['#FF5409', '#FFB080'] } if (value > 80 && value <= 100) { colorList = ['#DD352A', '#F27269'] } return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: colorList[0] }, { offset: 1, color: colorList[1] }]); }, barBorderRadius: 2 //柱状角成椭圆形 } } }] }; chart.setOption(option); return chart; }