140 lines
2.9 KiB
Vue
140 lines
2.9 KiB
Vue
<template>
|
|
<div class="j-progress-chart" ref="JProgressChart"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts4'
|
|
export default {
|
|
props: {
|
|
grid: {
|
|
type: Array,
|
|
default: () => ['10', '8%', '10', '10']
|
|
},
|
|
seriesData: {
|
|
required: true,
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
yData: {
|
|
required: true,
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.JProgressChart = echarts.init(this.$refs.JProgressChart)
|
|
this.createChart()
|
|
},
|
|
data() {
|
|
return { JProgressChart: null }
|
|
},
|
|
watch:{
|
|
seriesData:{
|
|
handler(newVal,oldVal){
|
|
if(newVal != oldVal){
|
|
this.createChart();
|
|
}
|
|
},
|
|
deep:true,
|
|
}
|
|
},
|
|
methods: {
|
|
createChart() {
|
|
const { grid, seriesData, yData } = this
|
|
const max = Math.max(...seriesData)
|
|
const maxData = seriesData.map(item => max)
|
|
const option = {
|
|
grid: {
|
|
top: grid[0],
|
|
right: grid[1],
|
|
bottom: grid[2],
|
|
left: grid[3],
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: () => ''
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: yData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: '#4A90E2' },
|
|
{ offset: 1, color: '#4ADEE2' }
|
|
]),
|
|
barBorderRadius: 3
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
color: 'white',
|
|
textStyle: {
|
|
fontSize: 15
|
|
}
|
|
},
|
|
data: seriesData,
|
|
barWidth: 13
|
|
},
|
|
{
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
barBorderRadius: 3
|
|
},
|
|
// label: {
|
|
// show: true,
|
|
// position: 'right',
|
|
// color: 'white',
|
|
// textStyle: {
|
|
// fontSize: 15
|
|
// }
|
|
// },
|
|
barGap: '-100%',
|
|
barCategoryGap: '40%',
|
|
data: maxData,
|
|
barWidth: 13,
|
|
animation: false
|
|
}
|
|
]
|
|
}
|
|
this.JProgressChart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.j-progress-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|