VUEecharts图表之得分环

// main.js
import 'element-ui/lib/theme-chalk/index.css';
import 'echarts';

// 页面使用
<template>
    <div>
        <div :style="{ width: '700px', height: '500px' }" ref="yibiaoid"></div>
    </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.$nextTick(() => {
            this.fn1();
        });
    },
    methods: {
        fn1() {
            let myChart = echarts.init(this.$refs.yibiaoid);
            window.onresize = myChart.resize;
            const gaugeData = [
                {
                    value: 20,
                    name: 'Perfect',
                    title: {
                        offsetCenter: ['0%', '-30%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '-20%']
                    }
                },
                {
                    value: 40,
                    name: 'Good',
                    title: {
                        offsetCenter: ['0%', '0%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '10%']
                    }
                },
                {
                    value: 60,
                    name: 'Commonly',
                    title: {
                        offsetCenter: ['0%', '30%']
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', '40%']
                    }
                }
            ];
            myChart.setOption({
                series: [
                    {
                        type: 'gauge',
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true,
                            clip: false,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#464646'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                width: 40
                            }
                        },
                        splitLine: {
                            show: false,
                            distance: 0,
                            length: 10
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            distance: 50
                        },
                        data: gaugeData,
                        title: {
                            fontSize: 14
                        },
                        detail: {
                            width: 50,
                            height: 14,
                            fontSize: 14,
                            color: 'auto',
                            borderColor: 'auto',
                            borderRadius: 20,
                            borderWidth: 1,
                            formatter: '{value}%'
                        }
                    }
                ]
            }, true);
            setInterval(function () {
                gaugeData[0].value = +(Math.random() * 100).toFixed(2);
                gaugeData[1].value = +(Math.random() * 100).toFixed(2);
                gaugeData[2].value = +(Math.random() * 100).toFixed(2);
                myChart.setOption({
                    series: [
                        {
                            data: gaugeData,
                            pointer: {
                                show: false
                            }
                        }
                    ]
                });
            }, 2000);

        }
    },
}
</script>

<style>
</style>