一、选定颜色主题
1、使用官方主题
2、使用自己定义的主题
二、单独柱状图颜色设置
1、全局修改柱状图颜色
2、单个柱状图修改颜色
三、根据数值范围动态修改柱状图颜色
1、使用visualMap组件
2、使用柱状图数据对比
一、选定颜色主题
使用官方主题和自定义主题是两种常见的选定颜色方案。1、使用官方主题
ECharts的官方主题提供了多种颜色选择,使用方便快捷。下列代码演示了如何在初始化柱状图时指定官方主题:// 引入主题文件 import "echarts/theme/macarons.js"; ... // 初始化echarts实例 var myChart = echarts.init(document.getElementById('myChart'), 'macarons');
2、使用自己定义的主题
如果官方主题无法满足需求,可以使用自定义主题来调整柱状图颜色。自定义主题需要在ECharts官方提供的主题模板上进行覆盖修改。下列代码演示了如何在初始化柱状图时使用自定义颜色主题:var customTheme = { // 在此添加自定义主题属性 color: ['#F0805A','#E98F6F', '#D0A7A7', '#9FDABF', '#BEBADA'] }; // 注册theme echarts.registerTheme('customTheme', customTheme); ... // 初始化echarts实例 var myChart = echarts.init(document.getElementById('myChart'), 'customTheme');
二、单独柱状图颜色设置
在特定情况下,需要单独设置某个柱状图的颜色。下列代码演示了两种修改柱状图颜色的方法:1、全局修改柱状图颜色
通过配置柱状图系列的color属性,可以实现全局修改柱状图颜色。下列代码演示了如何修改柱状图为绿色:option = { ... series: [{ name: '柱状图名称', type: 'bar', data: [5, 20, 36, 10, 10, 20], color: '#00FF00' // 修改颜色属性为绿色 }] };
2、单个柱状图修改颜色
通过柱状图的itemStyle属性,可以单独设置每个柱状图的颜色。下列代码演示了如何将第二个柱状图改为红色:option = { ... series: [{ name: '柱状图名称', type: 'bar', data: [5, 20, 36, 10, 10, 20], itemStyle: { normal: { barBorderColor: 'tomato', // 修改柱状图边框颜色 color: function(params) { // 某一个数据项的颜色。 var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex]; }, ... } } }] };
三、根据数值范围动态修改柱状图颜色
在一些业务场景下,需要根据不同数据大小范围区分柱状图的颜色。ECharts提供了两种方案实现该功能。1、使用visualMap组件
visualMap是ECharts提供的专门用于颜色映射的组件,常用于区间数据柱状图的颜色渲染。下列代码演示了使用visualMap组件,实现根据y值大小动态渲染柱状图颜色:option = { ... visualMap: { type: 'continuous', orient: 'horizontal', min: 0, max: 100, color: ['#00FF00','#FFD700', '#FF0000'], calculable: true, textStyle: { color: '#000000' } }, ... series: [{ name: '柱状图名称', type: 'bar', data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], ... }] };
2、使用柱状图数据对比
通过与不同参考值对比,可以根据柱状图数据大小范围动态修改柱状图颜色。下列代码演示了如何将第二个柱状图与第一个柱状图的数据对比,并根据大小区间设置不同颜色:option = { ... series: [{ name: '柱状图1名称', type: 'bar', data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], ... },{ name: '柱状图2名称', type: 'bar', data: [12, 24, 36, 48, 60, 72, 84, 96, 108, 120], itemStyle: { normal: { color: function(params) { var colors = [ '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF' ]; var index = 0; if (params.data > series[0].data[params.dataIndex]) { index = 2; } else if (params.data < series[0].data[params.dataIndex]) { index = 0; } else { index = 1; } return colors[index]; } } }, ... }] };以上是ECharts修改柱状图颜色的相关内容,通过官方主题、自定义主题、全局修改柱状图颜色、单个柱状图修改颜色、visualMap组件和柱状图数据对比等方法,可以满足不同场景下的定制化需求。