2037824892 2023-04-17 15:27 采纳率: 86.4%
浏览 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日

悬赏问题

  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）
  • ¥15 Windows11, backspace, enter, space键失灵