echart如何根据名称更改柱状图的某一柱子颜色

echart如何根据名称更改柱状图的某一柱子颜色，如

img


让名字带有NN的改为绿色

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7629401
  • 你也可以参考下这篇文章：echarts柱状图X轴坐标文字如何垂直或倾斜显示！
  • 除此之外, 这篇博客: echart柱状图实现实时更新（柱状图部分自动上升以及下降）中的 echart柱状图实现实时更新（柱状图部分自动上升以及下降） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 首先柱状图的图标x轴使用离散type：category
    • y抽连续性： type: ‘value’
    option = {
					title: {
					text: '裕林吊挂各组吊挂产量',
				   subtext: ''
						},
				xAxis: {
					name: '各小组名称',
					type: 'category',
					data: ['测试1','测试2','测试3','测试4','测试5','测试6','测试7','测试8']
				},
				yAxis: {
					name: 
					type: 'value'
				},
				series: {
					data: [120,349,239,345,280,234,567,213],
					type: 'bar',
					barWidth: '40%'	,
					label: {  
					    show: true,//是否展示  
					    position: 'top',//在顶端
					    textStyle: {  
					        fontWeight:'bolder',  
					        fontSize : '12',  
					        fontFamily : '微软雅黑',
					       // color: 'black'
					    } 
					}
				}
			}
    • 上述代码是基本的图标option，具体实现在下列代码中setInterval方法中。
    setInterval(function(){
				option.title.subtext=new Date().toLocaleTimeString()
					
					option.series.data.splice(0,1,(Math.random() * 100 + 5).toFixed(1) - 0)
					 myChart.setOption(option);
			},2000)

    周期函数可以不断地项数据库发送请求，不断获取最新数据。
    下面贴上完整代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.js"></script>
		<script src="dark.js"></script>
		<script src="jquery.js"></script>
	</head>
	<body>
		<div id="main" style="width: 1000px;height:400px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'),'dark');
			option = {
				 title: {
				    text: '裕林吊挂各组吊挂产量',
					subtext: '',
					textStyle: {
						fontFamily:  'monospace',
						fontSize: 28,
						
					}
				},
				
				xAxis: {
					name: '各小组名称',
					type: 'category',
					data: ['测试1','测试2','测试3','测试4','测试5']
				},
				yAxis: {
					name: '各小组产量',
					type: 'value'
				},
				series: {
					data: [120,349,239,345,280],
					type: 'bar',
					barWidth: '40%',
					label: {  
                        show: true,//是否展示  
                        position: 'top',//在顶端
                        textStyle: {  
                            fontWeight:'bolder',  
                            fontSize : '12',  
                            fontFamily : '微软雅黑',
                           // color: 'black'
                        } 
					}

				}
			}
			//ajax读取数据
			function readDataAst(sql) {
				var strURL = ""; 
				var result;//{"SL":"999"}
				$.ajax({
					type:"POST",
					url:strURL,
					data: {
						StrSql:sql,
						WRBZ:"READ"
					},
					async:false,
					success: function(data){
						result = data;
					}//成功执行方法
				});
				return result;
			}
			var sl;
			sl = readDataAst("select xx,sum(CL01) from yl_dg_clmx_vw where rq  = (select to_char(sysdate,'yyyy-mm-dd') from dual ) group by xx");
			console.log(sl)
			option.xAxis.data.splice(0,1,'shishi')
			setInterval(function(){
				option.title.subtext=new Date().toLocaleTimeString()
					
					option.series.data.splice(0,1,(Math.random() * 100 + 5).toFixed(1) - 0)
					 myChart.setOption(option);
			},2000)
		
		</script>
	</body>
</html>
  • 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点

可以使用echarts的setOption方法来更改某一柱子的颜色。具体实现可以通过遍历数据系列，找到对应的名称，并在项配置中设置itemStyle属性的color值为要改变的颜色值即可。例如：

// 假设options是你的图表配置对象
var options = {
  // ...其他配置
  series: [{
    type: 'bar',
    data: [{name: '柱子1', value: 10}, {name: '柱子2', value: 20}, {name: '柱子3', value: 30}],
    itemStyle: {
      color: '#ccc'
    }
  }]
}

// 更改'柱子2'的颜色为红色
options.series[0].data.forEach(function(item) {
  if (item.name === '柱子2') {
    item.itemStyle = {
      color: 'red'
    }
  }
})

// 重新渲染图表
myChart.setOption(options);

上述代码中，遍历了数据系列并找到了名称为'柱子2'的柱子，然后将该柱子的颜色修改为红色，并使用setOption方法重新渲染了图表。

依据名字带有NN 的格式化数组如下边的格式，就可以达到效果了

data: [
               //第一个柱子设置颜色
                        {
                              value: 25,
                              itemStyle: {
                                color: '#b6dcb6'
                              },
                            }
                        , 24, 20, 36, 1, 10, 20]
                    
                }]