1.安装

npm install echarts vue-echarts -S

2.全局注册

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 = EchartsGL

3.页面引用

<div class="chart-contanier">
            <div class="chart-box">
                <v-chart
                    ref="echarts"
                    :options="optionsOne"
                    theme="macarons"
                    :autoresize="true"
                    style="font-family: Digital"
                />
            </div>
</div>

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
        }
    }
}
</script>

<style lang="scss" scoped>
    .echarts {
        width: 100%;
        height: 100%;
    }
    .chart-box {
        width: 100%;
        height: 100%;
    }
    .chart-contanier{
        height: 100%;
        width: 20%;
    }
</style>