echarts:面积图按照数值标记颜色

网友求助，要做如下echarts图，分析一下，这是一个基础面积图，然后超过30就标红，低于10就标黄，中间10-30的markarea区域是浅灰色，难点在于标黄的区域，它在折线上边，如果在折线下边，那就好办了。

实现过程：

1、先画一个面积图，然后利用visualMap来分段设置颜色。

参考官网的案例

但是我们这里是要根据y轴的值来设置，官网案例是根据x轴，我们需要把dimension: 0,
    seriesIndex: 0,去掉，然后gt、lt这里设置y轴的值。

 现在我们得到这样一个图表，黄色标记果然在折线下边，这不是我们想要的效果，还需要继续改造。

 

 2、利用markarea生成折线上边的黄色标记区域。

如何将标黄区域移到折线上边，我思考了很久才想到方案，去掉visualMap里小于10的区域设置，然后在y轴0-10区间设置黄色的markarea，折线上边的标黄终于出现了，不过有一部分还是没有完全挡住。

 

3、设置areaStyle不透明完全挡住折线下边的标黄区域。

areaStyle默认的opacity是0.7，没办法完整遮挡住折线下边的markarea，所以得设置为1

 4、设置visualMap透明区域使中间marka显示出来。

标红和标黄都出来了，现在加上10-30标灰的markarea，然后我们发现markarea显示不全，原因是为了遮挡住黄色markarea折线下的部分，在visualMap的outOfRange设置了跟背景色一致的深蓝色，也就是说30以下的部分，全都是深蓝色，正好把中间的灰色部分挡住了，记住，默认面积图在markarea的上层。

visualMap再次发挥了作用，我们只需要把灰色区域的部分设置为透明，问题就解决了，灰色部分终于显示完整了。

 

 

 

 5、设置z使x轴的splitLine位于折线的上层。

以上基本图形已经出来了，现在来处理细节，加上gird边框，去掉横线，加上竖线，这是发现竖线的下半部分被标黄的markarea挡住了。

竖线来源于x轴设置，markarea来源于line的设置，所以我们需要让line的z小于x轴的z，竖线就可以在markarea上层了。

 

6、鼠标silent，隐藏标黄markarea的秘密。

终于快完成了啊，可是鼠标移到标黄区域，该死的黄色区域又露馅了。

silent设置为true，你就老老实实给我待着吧，别再出来捣乱了。

 

最终效果： 

 

 完整代码：

<template>
	<div>
		<div id="chart" style="width: 1000px;height: 500px;margin: auto;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {

				myChart: null,
				option: {
					animation: false,
					backgroundColor: '#00007f',
					grid: {
						show: true,
						borderColor: '#55aaff'
					},
					xAxis: {
						type: 'category',
						z: 9,
						boundaryGap: false,
						axisLine: {
							// 设置了grid，x轴线可以去掉了
							show: false
						},
						axisTick: {
							// 去掉x轴刻度线
							show: false
						},
						splitLine: {
							// 显示竖线
							show: true,
							lineStyle: {
								color: '#55aaff'
							}
						},
						// x轴文字的颜色
						 axisLabel:{
							  color: '#55aaff'
						 }

					},
					yAxis: {
						type: 'value',
						name: '03床',
						nameLocation: 'left',
						nameTextStyle: {
							color: '#fff',
							fontSize: 16,
							// name位置的微调
							// 表示 [上, 右, 下, 左] 的边距
							padding: [0, 100, 0, 0]
						},
						splitLine: {
							// 隐藏横线
							show: false
						},
						// y轴文字的颜色
						 axisLabel:{
							  color: '#55aaff'
						 }
					},
					visualMap: {
						show: false,
						pieces: [
							// 大于30的区域标红
							{
								gt: 30,
								color: '#ff0000'
							},
							// 给10-30的markarea留出空白
							{
								gt: 10,
								lt: 30,
								color: 'transparent'
							},
							
						],
						// 遮挡0-10的markarea，颜色必须跟这个图的背景色一致
						outOfRange: {
							color: '#00007f'
						}
					},
					series: [{
						type: 'line',
						smooth: 0.5,
						symbol: 'none',
						lineStyle: {
							color: '#55aaff',
							width: 2
						},
						areaStyle: {
							// opacity必须为1，才能遮得住0-10的markarea
							opacity: 1,
						},
						z: 1,
						data: [
							['2021-03', 5],
							['2021-04', 10],
							['2021-05', 15],
							['2021-06', 20],
							['2021-07', 25],
							['2021-08', 35],
							['2021-09', 28],
							['2021-10', 20],
							['2021-11', 10],
							['2021-12', 5],
							['2022-01', 10],
							['2022-02', 17],
							['2022-03', 20],
							['2022-04', 22],
							['2022-05', 34]
						],
						markArea: {
							silent: true,
							data: [
								// 低于10的标黄
								[{
										yAxis: 0, //起点
									},
									{
										yAxis: 10,
										itemStyle: {
											color: '#ffff00',
										},
									} //终点
								],
								// //10-30标注一个矩形的markarea
								[{
										yAxis: 10,
									},
									{
										yAxis: 30,
										itemStyle: {
											color: 'rgba(221, 221, 221, 0.1)',
										},
									}
								],
							]
						}
					}]
				}
			}
		},
		methods: {
			//初始化
			initEchart() {
				let Div = document.getElementById('chart');
				if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
					this.myChart.dispose();
				}
				this.myChart = echarts.init(Div);
				this.myChart.setOption(this.option);
			},
			//修改echart配制
			setEchartOption() {

			}
		},
		created() {
			this.setEchartOption();
		},
		beforeDestroy() {
			this.myChart.dispose();
		},
		mounted() {
			this.$nextTick(() => {
				this.initEchart();
			})
		}
	};
</script>

<style>

</style>

参考文章：

Echarts折线图分段用不同颜色显示