echart 状态图判断显示不同的颜色

最新推荐文章于 2024-03-24 11:29:12 发布

原创最新推荐文章于 2024-03-24 11:29:12 发布 · 573 阅读

CC 4.0 BY-SA版权

文章标签：

9 篇文章

订阅专栏

5 篇文章

订阅专栏

这篇博客展示了如何使用ECharts库创建一个柱状图，其中柱子的颜色根据其数值动态变化。通过设置x轴为日期，y轴为数值，并定义不同数值范围对应的颜色，实现了数据可视化。博客提供了完整的JavaScript代码示例，帮助读者理解并应用到自己的项目中。

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>ECharts</title>
	</head>
	<body>
	<!--创建一个div用于放结果图-->
	<div id="main" style="width: 600px;height:400px;"></div>
	<!-- 引入ECharts文件 -->
	<script src="Scripts/ECharts/echarts-all.js"></script>
	<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	option = {
	xAxis: {
	type: 'category',
	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
	type: 'value'
	},
	series: [{
	data: [20, 52, 200, 334, 390, 330, 220],
	type: 'bar', // pie 饼图
	itemStyle:{
	normal:
	{
	color: function (params)
	{
	if(params.data >0 && params.data <100){
	return "#EA0808";
	}else if(params.data >=100 && params.data<=300 ){
	return "#EAEA08";
	}else if(params.data>300)
	{
	return "#08A44E";
	}
	}
	}
	}
	}]

	};
	myChart.setOption(option);
	</script>
	</body>