echarst环形进度，官网https://echarts.apache.org/examples/zh/index.html
1.安装
npm install echarts vue-echarts -S2.全局注册
import Vue from 'vue'
import VueECharts from 'vue-echarts'
import Echarts from 'echarts'
import EchartsGL from 'echarts-gl'
import 'echarts-liquidfill' // echarts水球
import 'echarts/theme/macarons' // echarts theme
// 全局注册echarts组件
Vue.component('v-chart', VueECharts)
Vue.prototype.$echarts = Echarts
Vue.prototype.$echartsGL = EchartsGL3.页面引用
export default {
name: 'Index',
data() {
return {
queryParams: {
teamId: this.$store.getters.teamId,
projectId: this.$store.getters.projectId,
contractSectId: undefined
},
optionsOne: {},
optionsTwo: {},
optionsThree: {},
optionsFour: {},
optionsFive: {},
labelData1: [],
labelData: [],
total: 1,
eOne: 1,
eTwo: 1,
eThree: 1,
eFour: 1,
eFive: 1,
center: ['45%', '50%'],
left: '43%',
x: '43%',
y: '37%'
}
},
created() {
this.getCount()
},
mounted() {
},
methods: {
getCount() {
chartCount(this.queryParams).then(res => {
this.eOne = res.data.smz[0].statisCount
res.data.count.forEach(i => {
this.total += i.statisCount
})
this.getOptions()
})
/*//接口数据
trainCount(this.queryParams).then(res => {
res.data.count.forEach(item => {
switch (item.trainingType) {
case 'type1':
this.eTwo = item.counts
break
case 'type2':
this.eThree = item.counts
break
case 'type3':
this.eFour = item.counts
break
case 'type4':
this.eFive = item.counts
break
}
})
})*/
this.getOptions()
/* listLabourEmployee(this.queryParams).then(res => {
this.total = res.data.length
})*/
},
getOptions() {
var sumOne = this.eOne / this.total
var percentOne = Math.round(sumOne * 1000000) / 10000
this.optionsOne = {
textStyle: {
fontFamily: 'Digital'
},
grid: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
title: [{
text: percentOne.toFixed(1) + '%',
textAlign: 'center',
textStyle: {
fontSize: '25',
color: '#00FAA8',
textAlign: 'center',
fontFamily: 'Digital'
}
},
{
text: '人员实名制',
left: '43%',
bottom: '0%',
textAlign: 'center',
textStyle: {
fontSize: 14,
fontWeight: '400',
color: '#02D9FD',
textAlign: 'center'
}
}],
polar: {
radius: ['85%', '75%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [{
name: '内部进度条',
type: 'gauge',
center: ['45%', '50%'],
radius: '75%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[sumOne, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0.1,
color: '#2FA0FF'
}, {
offset: 1,
color: '#45FFE7'
}
])],
[1, '#262795']
],
width: 10
}
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
itemStyle: {
show: false
},
detail: {
show: false
},
label: {
show: false
},
title: { // 标题
show: false
},
data: [{
name: 'title',
value: this.eOne
}],
pointer: {
show: false
}
}
]
}
this.optionsOne.series[0].center = this.center
this.optionsOne.title[0].x = this.x
this.optionsOne.title[0].y = this.y
}
}
}