Requirements: Display the background in layered colors according to the value passed in. For example, the color of the y-axis 20-40 range is blue, and the color of 40-50 is red.
1. The effect is as follows
2. The code is explained as follows
First download echarts
npm install [email protected] -S
I am so scared that it is version 4.9. There will be a problem in higher versions, that is, if the background is written, the scale of the y-axis will not be displayed, only the line has no scale, so I still use the previous version here.
Among them onZero : Whether the axis of the X-axis or the Y-axis is on the 0 scale of the other axis, it is only valid when the other axis is a value axis and contains a 0 scale, if there are negative numbers in your value, just turn this off , otherwise The effect is as follows, the scale line goes above 0 degrees
axisLine: {
show: true, //是否显示轴线
onZero: false,
lineStyle: {
color: '#333'
}
}legend: It is the top part that can be clicked. The value of this data must be consistent with the name value of the series, otherwise it will not be displayed if it is written
legend: {
data: ['红色', '蓝色', '绿色']
}, 
tooltip: Made a way to prevent shaking. It is best to add this to the transitionDuration. If the legend is flipped, it will keep shaking if you don’t add it all the time, and the effect is not good.
tooltip: {
trigger: 'axis',
transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动
},
Background interval color: yAxis in markArea is the range of the vertical axis, here is the 0-200 setting is blue
markArea: {
data: [
[
{
yAxis: '0', //开始
itemStyle: {
// 看这里，加了这个属性
color: '#87c6fe',
// borderWidth: 1,
// borderType: "dashed",
opacity: 0.8
}
},
{
yAxis: '200',//结束
}
],
// 如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
]
}3. The complete code is as follows
<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>
This is the end of the article, I hope it will be helpful to you~