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 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?