echart面积图不同区域用不同的颜色表示

最新推荐文章于 2024-08-12 10:45:27 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-08-12 10:45:27 发布

阅读量1.8k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/u014265398/article/details/117135888

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

系列文章目录

echart面积图不同区域用不同的颜色表示

文章目录

系列文章目录
前言
一.代码示例
二.实现效果

前言

提示：这里可以添加本文要记录的大概内容：
echart面积图不同区域用不同的颜色表示

提示：以下是本篇文章正文内容，下面案例可供参考

一.代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>echart 面积图段显示不同的颜色</title>
		<style>
			#main {
				width: 100%;
				height: 300px;
				margin: 10% auto;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
	</body>
</html>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!--echart折线图-->
<script>
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	var base = +new Date(2021, 9, 3);
	var oneDay = 24 * 3600 * 1000;
	var date = [];

	var data = [72, 24, 58, 95, 29, 35, 45, 25, 47, 85, 69, 36, 14, 85, 38, 75, 69, 63, 98, 33, 25, 46, 78, 99, 12, 67,
		100
	];

	for (var i = 1; i < data.length; i++) {
		var now = new Date(base += oneDay);
		date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
	}
	option = {
		tooltip: {
			trigger: 'axis',
			position: function(pt) {
				return [pt[0], '10%'];
			}
		},
		title: {
			left: 'center',
			text: 'echart面积图不同区域用不同的颜色表示',
		},
		toolbox: {
			feature: {
				dataZoom: {
					yAxisIndex: 'none'
				},
				restore: {},
				saveAsImage: {}
			}
		},
		xAxis: {
			show: true, //隐藏x轴
			splitLine: {
				show: false,
				lineStyle: {
					color: '#dadada'
				}
			}, //去除网格线
			type: 'category',
			boundaryGap: false,
			data: date, //设置x轴数据
			axisTick: {
				show: false //不显示刻度线
			},
			axisLine: {
				// 设置x轴颜色
				symbol:['none','arrow'],//设置箭头
				lineStyle: {
					color: '#4e6ef2',
					width: 2, //这里是为了突出显示加上的
				}
			}

		},
		yAxis: {
			show: true, //隐藏y轴
			type: 'value',
			boundaryGap: [0, '100%'],
			splitLine: {
				show: false,
				lineStyle: {
					color: '#dadada'
				}
			}, //去除网格线
			axisTick: {
				show: false //不显示刻度线
			},
			axisLine: {
				// 设置y轴颜色
				symbol:['none','arrow'],//设置箭头
				lineStyle: {
					color: '#4e6ef2',
					width: 2, //这里是为了突出显示加上的
				}
			}

		},
		//关闭图例
		legend: {
			show: false,
			data: []

		},
		//设置不同折现区间设置不同颜色
		visualMap: [{
			left: '95%',
			top: '40px',
			show: true, //显示图例
			pieces: [{
					lte: 30, //小于等于
					color: '#4e6ef2'
				},
				{
					gt: 30, //大于3 小于等于6
					lte: 80,
					color: 'green'
				},
				{
					gt: 80, //大于6
					color: 'red'
				},
			],
			seriesIndex: 0 //0表示第一条线 第二条线依次累加
		}],
		series: [{
			name: '模拟数据',
			type: 'line',
			symbol: 'none',
			sampling: 'lttb',
			itemStyle: {
				color: '#4e6ef2'
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: '#4e6ef2'
					},
					{
						offset: 0.8,
						color: '#3385ff'
					},
					{
						offset: 1,
						color: 'red'
					},
				])
			},
			data: data
		}],
		grid: {
			left: '3%',
			right: '4%',
			bottom: '10%',
			containLabel: true
		}
	};

	option && myChart.setOption(option);
</script>