Finished product drawing
Component code
There are a total of five pieces of data, the percentage of daily data, the default value has been set, you can directly refer to it without passing parameters,
but the parent component remembers to set the height
<template>
<div id="test_app">
<!--echarts的容器-->
<div ref="pile" class="main"></div>
</div>
</template>
<script>
export default {
name: 'pile',
props: {
pileData: {
type: Object,
default: function () {
return {
data1: [58, 65, 50, 64, 57, 65, 55],
data2: [24, 18, 20, 16, 21, 14, 25],
data3: [12, 11, 19, 13, 15, 15, 11],
data4: [5, 5, 9, 5, 5, 4, 8],
data5: [1, 1, 2, 2, 2, 2, 1]
}
}
}
},
data() {
return {
charts: ''
}
},
methods: {
drawpile() {
const data = this.pileData
const legend = ['优秀', '良好', '一般', '中压', '高压']
const color = ['#49C68F', '#CAE88D', '#FFED64', '#F7AF02', '#FF2626']
this.charts = echarts.init(this.$refs.pile)
const option = {
color: color,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
fontSize: 10
}
},
legend: {
data: legend,
icon: 'circle',
itemHeight: 10,
textStyle: {
fontSize: 10
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '12%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['2022/7/1', '2022/7/1', '2022/7/1', '2022/7/1', '2022/7/1', '2022/7/1'],
axisTick: {
show: false,
alignWithLabel: true // 保证刻度线和标签对齐
},
axisLine: {
show: false // 不显示坐标轴线
},
axisLabel: {
showMaxLabel: true,
// interval: datax.length > 5 ? 1 : 0,
textStyle: {
color: '#8E8DA7' // 横坐标轴上文字颜色
},
fontSize: 10,
margin: 15
},
}
],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
interval: 25,
axisLabel: {
textStyle: {
color: '#8E8DA7'
},
fontSize: 10,
margin: 20
},
nameTextStyle: {
color: "#8E8DA7",
fontSize: 10,
padding: [0, 50, 0, 0] // 加上padding可以调整其位置
},
axisLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true // 保证刻度线和标签对齐
},
}
],
series: [
{
name: legend[0],
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: color[0]
},
emphasis: {
focus: 'series'
},
data: data.data1
},
{
name: legend[1],
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: color[1]
},
emphasis: {
focus: 'series'
},
data: data.data2
},
{
name: legend[2],
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: color[2]
},
emphasis: {
focus: 'series'
},
data: data.data3
},
{
name: legend[3],
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: color[3]
},
emphasis: {
focus: 'series'
},
data: data.data4
},
{
name: legend[4],
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: color[4]
// new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 可以通过该部分进行渐变颜色的编写
// {
// offset: 0,
// color: 'rgb(255, 191, 0)'
// },
// {
// offset: 1,
// color: 'rgb(224, 62, 76)'
// }
// ])
},
emphasis: {
focus: 'series'
},
data: data.data5
}
]
};
this.charts.setOption(option)
}
},
// 调用
mounted() {
this.$nextTick(function () {
this.drawpile()
})
}
}
</script>
<style scoped>
.main {
width: 100%;
height: 350px;
margin: auto;
background: #fff
}
</style>