echarts图形根据条件设置颜色显示问题

々HuoYan  CraZy 2019-04-18 12:46:09
有一组目标数据,和一组实际数据,共两组数据,要一一对应比较大小,如果目标值大小实际值则显示绿色,怎么才能实现呢
...全文
3128 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
修补披风的人 2020-09-08
  • 打赏
  • 举报
回复
这函数里的形参 params 没定义,怎么找到它?我这样写也没效果
温暖的松子 2019-12-25
  • 打赏
  • 举报
回复
地图图例颜色不支持function 那怎么根据参数改颜色?
  • 打赏
  • 举报
回复 1
引用 1 楼 囧的回复:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>_</title>
	<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.js"></script>
</head>
<body>
<div id="chart" style="width:800px; height:480px"></div>
<script type="text/javascript">
	var chart = echarts.init(document.getElementById("chart"));
	var target = [120, 120, 120, 120, 120, 120, 120];
	var data = [120, 200, 150, 80, 70, 110, 130];
	for(var i = 0; i < data.length; i++){
		data[i] = {
			value: data[i],
			itemStyle:{
				color: data[i] >= target[i] ? '#0a0' : '#c00'
			}
		}
	}
	var option = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: data,
			type: 'bar'
		}]
	};

	chart.setOption(option);
</script>
</body>
</html>

感谢老哥了,如果可以的话用color:function实现下,向你学习。
  • 打赏
  • 举报
回复
感谢老哥了,如果可以的话用color:function实现下,向你学习。
2019-04-19
  • 打赏
  • 举报
回复
我用function怎么出不来
2019-04-19
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>_</title>
	<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.js"></script>
</head>
<body>
<div id="chart" style="width:800px; height:480px"></div>
<script type="text/javascript">
	var chart = echarts.init(document.getElementById("chart"));
	var target = [120, 120, 120, 120, 120, 120, 120];
	var data = [120, 200, 150, 80, 70, 110, 130];
	for(var i = 0; i < data.length; i++){
		data[i] = {
			value: data[i],
			itemStyle:{
				color: data[i] >= target[i] ? '#0a0' : '#c00'
			}
		}
	}
	var option = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			data: data,
			type: 'bar'
		}]
	};

	chart.setOption(option);
</script>
</body>
</html>

  • 打赏
  • 举报
回复
好的谢谢,终于理解了
、、 2019-04-19
  • 打赏
  • 举报
回复 3
直接在里边比就行了
  • 打赏
  • 举报
回复
引用 4 楼 囧的回复:
color不支技function
我写了一段可以实现,但我不懂数组之后怎么去比较大小 itemStyle:{ // color:function(d){ // if(d.data.value>10000){ // return 'red' // }else{ // return 'green' // } // console.log(d) // } // }
2019-04-19
  • 打赏
  • 举报
回复
color不支技function

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧