echarts柱状图颜色渐变样式

 option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: '#00DCFB' }, // 设置颜色渐变{ offset: 1, color: '#14566B' }]},{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: '#FF515A' },{ offset: 1, color: '#FFDD53' }]},{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: '#6574E2' },{ offset: 1, color: '#261164' }]}],tooltip: {trigger: 'axis'},// 想要显示图例，要和series里name想对应legend: {data: ['委托', '样品', '任务'],textStyle: {color: '#fff',fontSize: 20},right: 10,icon: 'circle'},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',axisTick: { show: false },data: [],axisLabel: {show: true,textStyle: {color: 'rgb(167,169,173)', // 更改坐标轴文字颜色fontSize: 20 // 更改坐标轴文字大小}}},yAxis: {type: 'value',name: '单位 (个)',// 坐标轴图例文字nameTextStyle: {color: '#fff',fontSize: 20},min: 0,axisLabel: {show: true,textStyle: {color: 'rgb(167,169,173)', // 更改坐标轴文字颜色fontSize: 20 // 更改坐标轴文字大小}}},series: [{ name: '委托', type: 'bar', data: [] },{ name: '样品', type: 'bar', data: [] },{ name: '任务', type: 'bar', data: [] }]}

单个柱状图颜色修改

 series: [{name: '数量',type: 'bar',data: [],itemStyle: {normal: {// 每根柱子颜色设置color: function(params) {const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3','#4BABDE','#FFDE76','#E43C59','#37A2DA']return colorList[params.dataIndex]}}}}]

单个柱状图渐变颜色修改

import echarts from 'echarts'series: [{name: '数量',type: 'bar',data: [],itemStyle: {normal: {// 每根柱子颜色设置color: function(params) {const colorList = [new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 0, color: '#00DCFB' },{ offset: 1, color: '#14566B' }],false),// 2new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 0, color: '#FF515A' },{ offset: 1, color: '#FFDD53' }],false),// 3new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 0, color: '#6574E2' },{ offset: 1, color: '#261164' }],false),// 4new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 0, color: '#FCBC00' },{ offset: 1, color: '#B17B00' }],false),// 5new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 0, color: '#33BDAB' },{ offset: 1, color: '#005154' }],false)]return colorList[params.dataIndex]}}}}]

echarts柱状图颜色渐变样式相关推荐

如何用echarts实现颜色渐变半圆形仪表盘
1.代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="utf- ...
【Vue ECharts开发】自定义echarts柱状图颜色渐变效果
1. 效果演示 2. 示例代码 Vue 模板代码: <template><div><div id="main"></div>< ...
java horizontalbarchart_Android-MPChart,HorizontalBarChart 水平柱状图颜色渐变
1.新建color.xml文件,在res/values路径下新建color.xml文件文件内容: #ffcc0000 #ff00ddff 2. 在java代码中设置颜色 //1. 找到定义的2个颜色 ...
ECharts柱状图颜色设置
option = {xAxis : [{type : 'category',data : ['Mon', 'Tue', 'Wed'],axisTick: {alignWithLabel: true}} ...
echarts 柱状图颜色_echarts的实战案例一些（二）
之前的大数据项目又又又又改版啦,BTW,UI和生产童鞋又要给我们的工作增加难度啦...好吧,看下这次改版的一些目标样式吧~~ 水滴柱状图: 关键词:柱状图.水柱型难点:光柱位置调整.颜色及阴影配置 ...
echarts 柱状图圆角渐变背景根据高度实现渐变
文章目录效果圆角渐变背景不省略轴线文字根据高度实现渐变思路效果代码实现完整代码实现效果圆角渐变背景不省略轴线文字 xAxis: {axisLabel:{interval:0/ ...
echarts柱状图的样式调整及应用
一.在项目中引进echarts echarts官网:快速上手 - Handbook - Apache ECharts,点击左侧导航栏的"入门篇"中的"在项目中引入 Apa ...
echarts柱状图双柱状图基本用法
内容有点多,慢慢看哦!废话不多说,上代码如果想要把横向变成竖向的话就把xAxis和yAxis的内容交换一下就好啦首先定义一个盒子,设置大小 <style>.box{width: 50% ...
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...

echarts柱状图颜色渐变样式

echarts柱状图颜色渐变样式相关推荐

最新文章

热门文章