echarts 柱状图item颜色自定义

最新推荐文章于 2024-05-30 23:16:00 发布

Fade Away

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量1.1k

点赞数

分类专栏： Echart

本文链接：https://blog.csdn.net/qq_26239917/article/details/103760896

版权

Echart 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#e1{
				width: 700px;
				height: 300px;
				border:2px solid aqua;
			}
		</style>
		<script type="text/javascript" src="../../js/echarts.js" />

		</script>
		<script type="text/javascript" src="../../js/jquery.js" />

		</script>
	</head>
	<body>
		<div id="e1"></div>
	</body>

	<script type="text/javascript">
		xdata = ['baseline', 'Jan', 'Mar', 'May', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'WK48', 'Wk49', 'WK50', 'Dec', 'Final'];
		ydata1 = []
		ydata2 = []
		ydata3 = []
		for (var i = 1; i <= 14; i++) {
			ydata1.push(Math.ceil(Math.random() * 4 + 1))
			ydata2.push(Math.ceil(Math.random() * 4 + 1))
			ydata3.push(Math.ceil(Math.random() * 2))
		}


		var myChart = echarts.init($("#e1")[0]);
		//  ajax  get  data

		var option = {
			tooltip: {
				trigger: 'item',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				},
				formatter: '时间：{b}<br>{a}：{c}%'
			},
			legend: {
				// data: ['蒸发量', '降水量', '平均温度']
			},
			xAxis: [{
				color: 'white',
				type: 'category',
				data: xdata,
				axisLabel: {
					interval: 0
				},
				axisPointer: {
					type: 'shadow'
				},
				axisTick: {
					lineStyle: {
						// color:'white'
					}
				},
				axisLine: {
					onZero: true,
					lineStyle: {
						// color:'white'
					}
				},
				// markPoint:{
				// 	symbol:'pin',
				// 	symbolSize:'500'
				// }
			}],
			yAxis: [{
				splitLine: {
					show: false
				},
				// color:'white',
				type: 'value',
				axisLabel: {
					formatter: '{value}%'
				},
				axisTick: {
					lineStyle: {
						// color:'white'
					}
				},
				axisLine: {
					onZero: true,
					lineStyle: {
						// color:'white'
					}
				}
			}, ],
			series: [{
					name: '蒸发量',
					type: 'bar',

					data: ydata1,
					// barWidth: '40', //---柱形宽度
					barCategoryGap: '50%', //---柱形间距
					label: {
						normal: {
							show: true,
							position: 'top',
							fontWeight: 'bold',
							fontSize: 14,
							// formatter: "series-lable-{a}-{b}-{c}-{value}-{name}%"
							formatter: "{c}%"
						}
					},
					itemStyle: {
						normal: {
							color: function(params) {
								// build a color map as your need.
								var colorList = [
									'#D4262F', '#AADE6C', '#FFE211'
								];
								console.log(ydata1[params.dataIndex],ydata2[params.dataIndex]);
								if(ydata1[params.dataIndex] < ydata2[params.dataIndex]){
									return colorList[0]
								}else if(ydata1[params.dataIndex] == ydata2[params.dataIndex]){
									return colorList[1]
								}else{
									return colorList[2]
								}
								//dataIndex
								// return colorList[params.dataIndex]
							}
						}
					}
				},
				{
					name: '平均温度',
					type: 'line',
					symbol: 'triangle',
					symbolSize: 10,
					label: {
						normal: {
							show: true,
							position: 'top',
							fontWeight: 'bold',
							fontSize: 14,
							// formatter: "series-lable-{a}-{b}-{c}-{value}-{name}%"
							formatter: "{c}%"
						}
					},
					lineStyle: {
						normal: {
							color: '#92D050'
						}
					},
					itemStyle: {
						normal: {
							color: 'black'
						}
					},
					data: ydata3,
				}
			]
		};

		myChart.setOption(option)
	</script>
</html>

Fade Away

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts 柱状图item颜色自定义

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #e1{ width: 700px; height: 300px; border:2px solid aqua; ...
复制链接

扫一扫