Requisitos: muestre el fondo en capas de colores de acuerdo con el valor pasado. Por ejemplo, el color del rango 20-40 del eje Y es azul y el color de 40-50 es rojo.
1. El efecto es el siguiente
2. El código se explica de la siguiente manera
Primera descarga echarts
npm instalar [email protected] -S
Me da mucho miedo que sea la versión 4.9, habrá un problema en versiones superiores, es decir, si se escribe el fondo, no se mostrará la escala del eje y, solo la línea no tiene escala, así que sigo utilice la versión anterior aquí.
Entre ellos onZero : si el eje del eje X o el eje Y está en la escala 0 del otro eje, solo es válido cuando el otro eje es un eje de valor y contiene una escala 0, si hay números negativos en su valor, simplemente apáguelo , de lo contrario, el efecto es el siguiente, la línea de escala supera los 0 grados
axisLine: {
show: true, //是否显示轴线
onZero: false,
lineStyle: {
color: '#333'
}
}Leyenda: Es la parte superior en la que se puede hacer clic, el valor de este dato debe ser consistente con el valor del nombre de la serie, de lo contrario no se mostrará si está escrito
legend: {
data: ['红色', '蓝色', '绿色']
}, 
información sobre herramientas: se hizo una manera de evitar el temblor. Es mejor agregar esto a la duración de la transición. Si se invierte la leyenda, seguirá temblando si no la agrega todo el tiempo, y el efecto no es bueno.
tooltip: {
trigger: 'axis',
transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动
},
Color de intervalo de fondo: yAxis en markArea es el rango del eje vertical, aquí está la configuración 0-200 es azul
markArea: {
data: [
[
{
yAxis: '0', //开始
itemStyle: {
// 看这里，加了这个属性
color: '#87c6fe',
// borderWidth: 1,
// borderType: "dashed",
opacity: 0.8
}
},
{
yAxis: '200',//结束
}
],
// 如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
]
}3. El código completo es el siguiente
<template>
<div class="content-box">
<div class="container">
<div id="echartsData"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {};
},
mounted() {
this.lineEcharts();
},
methods: {
lineEcharts() {
const option = {
xAxis: {
name: '',
// type: "",
position: 'bottom',
offset: 0,
axisLabel: {
color: '#0000000',
fontSize: 10
},
data: ['5-20', '5-21', '5-22', '5-23', '5-24', '5-25', '5-26', '5-27'],
splitLine: {
show: true,
lineStyle: {
color: '#59924d',
type: 'solid',
width: 0.8
}
},
zlevel: 9,
axisTick: {
show: true,
inside: false
},
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#333'
}
}
},
// 内置区域缩放
dataZoom: [
{
xAxisIndex: [0],
type: 'inside',
filterMode: 'none'
},
{
yAxisIndex: [0],
type: 'inside',
filterMode: 'none'
}
],
tooltip: {
trigger: 'axis',
transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动
},
legend: {
data: ['红色','蓝色','绿色']
},
yAxis: [
{
name: '',
type: 'value',
show: true,
axisLabel: {
boundaryGap: false,
color: '#000000',
fontSize: 10,
interval: 0
},
splitLine: {
show: true,
lineStyle: {
color: '#59924d',
type: 'dashed',
width: 0.8
}
},
zlevel: 9,
axisTick: {
show: true
},
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#333'
}
}
}
],
grid: {
top: '10%',
left: '10%',
right: '5%',
bottom: '15%'
},
series: [
{
name: '红色',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
symbolSize: 5, //小圆点的大小
markArea: {
data: [
[
{
yAxis: '0', //开始
itemStyle: {
// 看这里，加了这个属性
color: '#87c6fe',
// borderWidth: 1,
// borderType: "dashed",
opacity: 0.8
}
},
{
yAxis: '200'
}
],
[
{
yAxis: '200', //结束
itemStyle: {
// 看这里，加了这个属性
color: '#ece6b2',
// borderWidth: 1,
// borderType: "solid",
opacity: 0.5
}
},
{
yAxis: '250'
}
],
[
{
yAxis: '250',
itemStyle: {
// 看这里，加了这个属性
color: '#ffbf9c',
opacity: 0.6
}
},
{
yAxis: '300'
}
]
// 如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
]
}
},
{
name: '蓝色',
data: [58, 42, 152, 110, 135, 120, 280],
type: 'line',
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
symbolSize: 5 //小圆点的大小
},
{
name: '绿色',
data: [48, 75, 52, 240, 11, 70, 33],
type: 'line',
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
symbolSize: 5 //小圆点的大小
}
]
};
const myChart = echarts.init(document.getElementById('echartsData'));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener('resize', () => {
myChart.resize();
});
}
}
};
</script>
<style lang="scss" scoped>
#echartsData {
height: 500px;
width: 100%;
}
</style>
Este es el final del artículo, espero que les sea útil~