Line chart custom gradient color legend
- Gradient color legend
- Gradient area
- Dimension line, Dimension text
<template>
<div class="test_app">
<div id="time" ref="time" />
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
}
},
// 调用
mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
},
methods: {
drawLine() {
// 数据
const dataX = ['20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34']
const values = [121, 103, 59, 63, 81, 119, 141, 119, 81, 63, 59, 78, 124, 109, 131]
const numList1 = []
const numList2 = []
const min = Math.min(...values) // 计算最小值
const max = Math.max(...values)
const index = values.findIndex(item => {
return item === max
})
values.forEach((x, i) => {
if (i < index) {
console.log('数据', x, i)
numList1.push(parseFloat(x))
numList2.push('-')
} else if (i === index) {
numList1.push(parseFloat(x))
numList2.push(parseFloat(x))
} else {
numList2.push(parseFloat(x))
numList1.push('-')
}
})
console.log('最大值所在的数组下标', index, '分离后的数组', numList1, numList2)
this.charts = echarts.init(this.$refs.time)
const Option = {
grid: {
left: '4%',
right: '4%',
bottom: 0,
top: '25%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true, // 设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
data: dataX,
axisLabel: { // 配置X轴字体大小
textStyle: {
fontSize: '10',
color: '#8E8DA7'
},
margin: 15
},
axisLine: {
show: false,
lineStyle: {
color: '#E9E9F5'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
min: min - (max - min) / 2,
max: max + (max - min) / 2,
interval: (max - min) / 2,
axisLabel: { // 配置Y轴字体大小
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true, // 显示网格线
lineStyle: {
color: '#E9E9F5'
}
}
},
// 图例
visualMap: [
{
type: 'piecewise',
show: true,
dimension: 0,
top: 0,
right: 10,
itemWidth: 12,
itemHeight: 12,
align: 'left',
textGap: 5,
itemGap: 30,
orient: 'horizontal',
textStyle: {
color: '#3449A3',
fontSize: 10
},
pieces: [
{
gt: 0,
lt: index, // 数据下标<最大值配置
label: '吸气阶段',
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#49C68F' }, // 顶端颜色
{ offset: 1, color: 'rgba(73, 198, 143, 0)' } // 底部颜色
]
)
},
{
gt: index,
lt: values.length, // 数据下标>最大值配置
label: '呼气阶段',
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#BBBFFF' }, // 顶端颜色
{ offset: 1, color: 'rgba(168, 230, 255, 0)' } // 底部颜色
]
)
}
]
}
],
series: [
{
type: 'line',
name: '吸气阶段',
data: numList1,
smooth: true, // 是否平滑曲线
symbol: function(value, params) {
console.log(params)
if (value === min || value === max) {
return 'emptyCircle' // 拐点类型
} else {
return 'none' // 拐点不显示
}
}, // 拐点的形状,
label: { // 配置数据标签
normal: {
show: false,
color: 'black',
textStyle: {
fontSize: '10'
}
}
},
areaStyle: { // 配置渐变色
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#49C68F' }, // 顶端颜色
{ offset: 1, color: 'rgba(73, 198, 143, 0)' } // 底部颜色
]
)
}
},
itemStyle: {
normal: {
color: '#5D5ABF', // 这里设置的拐点颜色
borderColor: '#5D5ABF', // 拐点边框颜色
lineStyle: {
color: '#5D5ABF',
width: 1 // 线条粗细
}
}
},
// 最大值标注线
markLine: {
symbol: ['none', 'none'], // 去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: 'dotted',
color: { // 设置渐变
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7581BD '// 0% 处的颜色
}, {
offset: 1, color: '#7581BD' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
silent: true, // 鼠标悬停事件, true悬停不会出现实线
data: [{
// value: '呼吸',
label: {
show: true,
color: '#6C6B86',
fontSize: 10,
formatter: '呼吸'
},
xAxis: dataX[index]
}]
}
}, {
type: 'line',
name: '呼气阶段',
data: numList2,
smooth: true, // 是否平滑曲线
symbol: function(value, params) {
console.log(params)
if (value === min || value === max) {
return 'emptyCircle' // 拐点类型
} else {
return 'none' // 拐点不显示
}
}, // 拐点的形状
areaStyle: { // 配置渐变色
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#BBBFFF' }, // 顶端颜色
{ offset: 1, color: 'rgba(168, 230, 255, 0)' } // 底部颜色
]
)
}
},
itemStyle: {
normal: {
color: '#5D5ABF', // 这里设置的拐点颜色
borderColor: '#5D5ABF', // 拐点边框颜色
lineStyle: {
color: '#5D5ABF',
width: 1 // 线条粗细
}
}
},
label: { // 配置数据标签
normal: {
show: false,
color: 'black',
textStyle: {
fontSize: '10'
}
}
},
// 左右的文字
markLine: {
symbol: ['none', 'none'], // 去掉箭头
itemStyle: {
normal: {
lineStyle: {
color: { // 设置渐变
colorStops: [{
offset: 0, color: 'rgba(0,0,0,0)'// 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,0,0,0)' // 100% 处的颜色
}]
}
}
}
},
silent: true,
data: [{
label: {
show: true,
color: '#6C6B86',
fontSize: 10,
// position: 'middle',
padding: -110,
formatter: '吸气阶段'
},
xAxis: dataX[index - 2]
}, {
label: {
show: true,
color: '#6C6B86',
fontSize: 10,
// position: 'middle',
padding: -110,
formatter: '呼气阶段'
},
xAxis: dataX[index + 2]
}]
}
}
]
}
this.charts.setOption(Option)
}
}
}
</script>
<style lang="scss" scoped>
.test_app {
width: 100%;
align-items: center;
display: flex;
justify-items: center;
}
#time {
width: 90%;
height: 180px;
}
</style>