包机组修改

whychdw

2020-12-30 5813173e2ffa3e92d7cf3a71d306cd2e316a88a6

包机组修改

 src/components/chart/GaugeCircleChart.vue

New file
@@ -0,0 +1,155 @@
<template>
    <div class="e-chart-root" :class="{'full-screen': fullScreenState}">
        <div class="e-chart-container">
            <div class="e-chart" :id="id" :ref="id"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "GaugeCircleChart",
    data() {
        return {
            fullScreenState: false,
        }
    },
    methods: {
        getOption() {
            let option = {
                title: {
                    show: true,
                    text: '任务进度',
                    x: '50%',
                    y: '57%',
                    z: 8,
                    textAlign: 'center',
                    textStyle: {
                        color: '#f1f7fe',
                        fontSize: 20,
                        fontWeight: 'normal'
                    },

                },
                series: [
                    {
                        name: "内部（环形）进度条",
                        type: "gauge",
                        radius: '50%',
                        startAngle: 90,
                        endAngle: 269.9,
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [1, '#fdda9a'],
                                    [1, "#FFFFFF"]
                                ],
                                width: 14
                            }
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,

                        },
                        splitLine: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                    },
                    {
                        name: '外部刻度',
                        type: 'gauge',
                        radius: '40%',
                        min: 0, //最小刻度
                        max: 100, //最大刻度
                        splitNumber: 10, //刻度数量
                        startAngle: 0,
                        endAngle: 359.9,
                        axisLine: {
                            show: true,
                            // 仪表盘刻度线
                            lineStyle: {
                                width: 2,
                                color: [
                                    [1, '#FFFFFF']
                                ]
                            }
                        },
                        //仪表盘文字
                        axisLabel: {
                            show: false,
                        }, //刻度标签。
                        axisTick: {
                            show: true,
                            splitNumber: 7,
                            lineStyle: {
                                color: '#fdda9a', //用颜色渐变函数不起作用
                                width: 2,
                            },
                            length: -8
                        }, //刻度样式
                        splitLine: {
                            show: false,
                        }, //分隔线样式
                        detail: {
                            show: false
                        },
                        pointer: {
                            show: false
                        }
                    },
                    /*内部*/
                    {
                        type: 'pie',
                        radius: ['0', '40%'],
                        center: ['50%', '50%'],
                        z: 8,
                        hoverAnimation: false,
                        data: [{
                            name: '检查进度',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#fdda9a'
                                    }, {
                                        offset: 1,
                                        color: '#ff7c2c'
                                    }])
                                }

                            },
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value + '%';
                                    },
                                    color: '#FFFFFF',
                                    fontSize: 54,
                                    fontWeight: "bold",
                                    position: 'center',
                                    show: true
                                }
                            },
                            labelLine: {
                                show: false
                            }
                        }],
                    },
                ]
            };
        }
    }
}
</script>

<style scoped>

</style>