Requisitos: Exiba o plano de fundo em cores em camadas de acordo com o valor passado. Por exemplo, a cor do intervalo 20-40 do eixo y é azul e a cor de 40-50 é vermelha.
1. O efeito é o seguinte
2. O código é explicado da seguinte forma
Primeiro download de echarts
npm install [email protected] -S
Estou com tanto medo que seja a versão 4.9. Vai dar um problema nas versões superiores, ou seja, se o fundo for escrito, a escala do eixo y não será exibida, apenas a linha não tem escala, então ainda use a versão anterior aqui.
Entre eles , onZero : Se o eixo do eixo X ou do eixo Y está na escala 0 do outro eixo. Só é válido quando o outro eixo é um eixo de valor e contém uma escala 0. Se houver valores negativos números em seu valor, apenas desligue isso , caso contrário O efeito é o seguinte, a linha de escala vai acima de 0 graus
axisLine: {
show: true, //是否显示轴线
onZero: false,
lineStyle: {
color: '#333'
}
}legenda: É a parte superior que pode ser clicada. O valor deste dado deve ser consistente com o valor do nome da série, caso contrário não será exibido se estiver escrito
legend: {
data: ['红色', '蓝色', '绿色']
}, 
dica de ferramenta: Feito uma maneira de evitar tremores. É melhor adicionar isso à transiçãoDuração. Se a legenda for invertida, ela continuará tremendo se você não adicioná-la o tempo todo e o efeito não é bom.
tooltip: {
trigger: 'axis',
transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动
},
Cor do intervalo de fundo: yAxis em markArea é o intervalo do eixo vertical, aqui a configuração 0-200 é azul
markArea: {
data: [
[
{
yAxis: '0', //开始
itemStyle: {
// 看这里，加了这个属性
color: '#87c6fe',
// borderWidth: 1,
// borderType: "dashed",
opacity: 0.8
}
},
{
yAxis: '200',//结束
}
],
// 如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
]
}3. O código completo é o seguinte
<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 é o final do artigo, espero que seja útil para você ~