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

々HuoYan  CraZy 2019-04-18 12:46:09

有一组目标数据，和一组实际数据，共两组数据，要一一对应比较大小，如果目标值大小实际值则显示绿色，怎么才能实现呢

...全文

3133 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

修补披风的人 2020-09-08

打赏
举报

这函数里的形参 params 没定义，怎么找到它？我这样写也没效果

温暖的松子 2019-12-25

打赏
举报

地图图例颜色不支持function 那怎么根据参数改颜色？

々HuoYan  CraZy 2019-04-19

打赏
举报

引用 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实现下，向你学习。

々HuoYan  CraZy 2019-04-19

打赏
举报

感谢老哥了，如果可以的话用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>

々HuoYan  CraZy 2019-04-19

打赏
举报

好的谢谢，终于理解了

ãã 2019-04-19

打赏
举报

直接在里边比就行了

々HuoYan  CraZy 2019-04-19

打赏
举报

引用 4 楼囧的回复:

color不支技function

我写了一段可以实现，但我不懂数组之后怎么去比较大小 itemStyle:{ // color:function(d){ // if(d.data.value>10000){ // return 'red' // }else{ // return 'green' // } // console.log(d) // } // }

囧 2019-04-19