2037824892 2023-04-17 15:27 采纳率: 78.9%
浏览 32
已结题

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

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

img


让名字带有NN的改为绿色

  • 写回答

3条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-04-17 18:42
    关注
    • 这有个类似的问题, 你可以参考下: 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】课程目标小节, 巩固相关知识点
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 4月26日
  • 已采纳回答 4月18日
  • 创建了问题 4月17日

悬赏问题

  • ¥20 给自己本科IT专业毕业的妹m找个实习工作
  • ¥15 用友U8：向一个无法连接的网络尝试了一个套接字操作，如何解决？
  • ¥30 我的代码按理说完成了模型的搭建、训练、验证测试等工作(标签-网络|关键词-变化检测)
  • ¥50 mac mini外接显示器 画质字体模糊
  • ¥15 TLS1.2协议通信解密
  • ¥40 图书信息管理系统程序编写
  • ¥20 Qcustomplot缩小曲线形状问题
  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 树莓派控制机械臂传输命令报错，显示摄像头不存在
  • ¥15 前端echarts坐标轴问题