富文本动态切换label颜色

最新推荐文章于 2023-04-01 22:39:12 发布

Fade Away

最新推荐文章于 2023-04-01 22:39:12 发布

阅读量557

点赞数

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

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#e1{
				width: 700px;
				height: 300px;
				border:2px solid aqua;
			}
		</style>
		<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>

		</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 colorList = [
			'#D4262F', '#AADE6C', '#FFE211'
		];
		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,
							// textStyle: {
							// 	color: 'red'
							// },
							formatter: function(params) {
								console.log(params)
								if (ydata1[params.dataIndex] < ydata2[params.dataIndex]) {
									return [`{red|${params.data} %}`]
								} else if (ydata1[params.dataIndex] == ydata2[params.dataIndex]) {
									return [`{yellow|${params.data} %}`]
								} else {
									return [`{green|${params.data} %}`]
								}
								// return `{value} %`
							},
							rich: {
								red: {
									color: colorList[0]
								},
								yellow: {
									color: colorList[1]
								},
								green: {
									color: colorList[2]
								}
							}
						}
					},
					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>
<!-- 
 getLossofWorkEfficiencyHistoryOption-standard
 -setSingleLineBarChartA-
 -->

Fade Away

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本动态切换label颜色

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

扫一扫