echarts圖形根據條件設定顏色顯示問題-有解無憂

有一組目標資料，和一組實際資料，共兩組資料，要一一對應比較大小，如果目標值大小實際值則顯示綠色，怎么才能實作呢

uj5u.com熱心網友回復：



<!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>

uj5u.com熱心網友回復：

感謝老哥了，如果可以的話用color:function實作下，向你學習。

uj5u.com熱心網友回復：

參考 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實作下，向你學習。

uj5u.com熱心網友回復：

color不支技function

uj5u.com熱心網友回復：

參考 4 樓囧的回復:

color不支技function

我寫了一段可以實作，但我不懂陣列之后怎么去比較大小

itemStyle:{
// color:function(d){
// if(d.data.value>10000){
// return 'red'
// }else{
// return 'green'
// }
// console.log(d)
// }
// }

uj5u.com熱心網友回復：

直接在里邊比就行了

uj5u.com熱心網友回復：

好的謝謝，終于理解了

uj5u.com熱心網友回復：

我用function怎么出不來

uj5u.com熱心網友回復：

地圖圖例顏色不支持function 那怎么根據引數改顏色？

uj5u.com熱心網友回復：

這函式里的形參 params 沒定義，怎么找到它？我這樣寫也沒效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/9110.html

標籤：HTML(CSS)

上一篇：什么是銷售管理系統

下一篇：求助，如何讓背景圖片充滿全圖，隨容器大小變動而變動