网友求助,要做如下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>
参考文章: