real3d-portalsite/src/views/cockpit/common/DialWatch.vue

<template>
    <div class="content_scjd">
        <div class="space">

            <div class="lt_box box">
                <div class="text">

                    <p>{{ dial_watch_info.lt.key }}</p>
                    <span>{{ dial_watch_info.lt.value }}</span>{{ dial_watch_info.lt.unit }}
                </div>
            </div>
            <div class="lb_box box">
                <div class="text">
                    <p>{{ dial_watch_info.lb.key }}</p>
                    <span>{{ dial_watch_info.lb.value }}</span>{{ dial_watch_info.lb.unit }}
                </div>
            </div>
            <div id="dial_watch_scjg" ref="dial_watch_scjg">


            </div>
            <div class="rt_box_tdsc_jd box">
                <div class="text">
                    <p>{{ dial_watch_info.rt.key }}</p>
                    <span>{{ dial_watch_info.rt.value }}</span>{{ dial_watch_info.rt.unit }}
                </div>
            </div>
            <div class="rb_box_tdsc_jd box">
                <div class="text">
                    <p>{{ dial_watch_info.rb.key }}</p>
                    <span>{{ dial_watch_info.rb.value }}</span>{{ dial_watch_info.rb.unit }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    components: {},
    data() {
        return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    props: {
        dial_watch_info: {
            type: Object,
            default: {
                lt: {
                    key: '计划收储',
                    value: 0,
                    unit: "公顷",

                }, lb: {
                    key: "完成收储",
                    value: 0,
                    unit: "公顷",

                }, rt: {
                    key: "计划收储项目",
                    value: 0,
                    unit: "个",

                }, rb: {
                    key: "完成收储项目",
                    value: 0,
                    unit: "个",

                },
            }

        }
    },
    //方法集合
    methods: {
        init_dial_watch(echart_data) {
            var myChart = echarts.init(this.$refs.dial_watch_scjg);
            var demoData = {
                name: '城镇化率',
                value: echart_data,
            };
            let option = {
                backgroundColor: 'rgba(0,0,0,0)',
                title: {
                    text: `{num|${demoData.value}%} ` + '\n' + `{label|完成率}`,

                    x: '49%',
                    y: '70%',
                    textAlign: 'center',
                    textStyle: {
                        rich: {
                            num: {
                                fontWeight: '600',
                                color: 'rgba(249, 180, 71, 1)',
                                fontFamily: '微软雅黑',
                                fontSize: 14,
                            }, label: {
                                color: "#fff",
                                fontSize: 12,
                            },
                        },
                    },
                },
                grid: { top: '0%', left: '0%' },
                series: [
                    {
                        type: 'gauge',
                        radius: '90%', // 1行3个
                        center: ['50%', '70%'],
                        splitNumber: 10,
                        // min: 0,
                        max: 100,
                        startAngle: 220,
                        endAngle: -44,
                        z: 99,
                        // 线
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: [[1, 'rgba(255,255,255,0)']],
                            },
                            detail: {
                                formatter: '{value}',
                            },
                            data: [
                                {
                                    value: 50,
                                    name: 'SCORE',
                                },
                            ],
                        },
                        //刻度标签。
                        axisTick: {
                            show: true,
                            splitNumber: 6, //刻度的段落数
                            lineStyle: {
                                color: '#ccc',
                                width: 1, //刻度的宽度
                                shadowColor: 'RGBA(60, 139, 232, 0)',
                                shadowBlur: 2,
                            },
                            length: 3, //刻度的长度
                        },
                        splitLine: {
                            //文字和刻度的偏移量
                            show: true,
                            length: 1, //长度
                            lineStyle: {
                                color: '#ccc',
                                width: 1,
                            },
                        },
                        // //刻度线文字
                        axisLabel: {
                            show: false,
                            color: '#ccc',
                            fontSize: 1,
                            distance: -30,
                        },
                        data: [
                            {
                                value: demoData.value,
                                name: 'SCORE',
                                itemStyle: {
                                    color: 'rgba(73, 148, 236, 1)',
                                },
                            },
                        ],
                        pointer: {
                            show: true,
                            length: '40%',
                            radius: '50%',
                            width: 5, //指针粗细
                            offsetCenter: [0, -10]
                        },
                        detail: {
                            show: false
                        },
                        title: {
                            // 仪表盘标题。
                            show: false,
                        },
                    },
                    {
                        name: demoData.name,
                        type: 'pie',
                        radius: ['65%', '50%'],
                        center: ['50%', '70%'],
                        startAngle: 220,
                        endAngle: -10,
                        color: [
                            {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(62, 147, 244, 0.3)', // 0% 处的颜色
                                    },

                                    {
                                        offset: 1,
                                        color: 'rgba(62, 147, 244, 1)', // 100% 处的颜色
                                    },

                                ],
                            },
                            'transparent',
                        ],
                        hoverAnimation: true,
                        legendHoverLink: false,
                        z: 10,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: 60,
                            },
                            {
                                value: 20,
                            },
                        ],
                    },
                    {
                        type: 'pie',
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        center: ['50%', '70%'],
                        radius: ['0%', '60%'],
                        startAngle: 230,
                        data: [
                            {
                                value: 100,
                                itemStyle: {
                                    normal: {
                                        color: {
                                            type: 'radial',
                                            x: 0.5,
                                            y: 0.5,
                                            r: 0.5,
                                            colorStops: [
                                                { offset: 0, color: 'rgba(0,0,0,0)' },
                                                { offset: 1, color: 'rgba(0,0,0,0)' },
                                            ],
                                        },
                                        opacity: 0.2,
                                    },
                                },
                            },
                            {
                                value: 100,
                                color: 'transparent',
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);

        },
    },
    beforeCreate() { }, //生命周期 - 创建之前
    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    mounted() {
        // this.init_dial_watch_scjg();

    }, //生命周期 - 挂在完成
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroy() { },//生命周期 - 销毁完成
    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style lang="scss"  scoped>
.content_scjd {
    #dial_watch_scjg {
        // border: 1px red solid;
        width: 26rem;
        height: 8.5rem;
        float: left;
        position: relative;
        bottom: 9rem;
        z-index: -1;
    }


    .box {
        width: 10rem;
        height: 5rem;
        position: absolute;

    }

    .lt_box {

        background: no-repeat;
        background-size: 101% 50%;
        background-image: url("/static/images/overview/ltback.png");
        position: relative;
        top: 3rem;
    }

    .lb_box {

        background: no-repeat;
        background-size: 101% 50%;

        background-image: url("/static/images/overview/lbback.png");
        position: relative;
        top: 3rem;

    }

    .rt_box_tdsc_jd {
        background: no-repeat;
        background-size: 101% 50%;

        background-image: url("/static/images/overview/rtback.png");
        position: relative;
        top: -7rem;
        left: 16rem;
        z-index: -1;

        .text {
            margin-left: 4rem;
            margin-left: 4rem;
            margin-top: -8.5rem;
            float: left;
        }
    }

    .rb_box_tdsc_jd {
        background: no-repeat;
        background-size: 101% 50%;
        background-image: url("/static/images/overview/rbback.png");
        position: relative;
        top: -7rem;
        left: 16rem;
        z-index: -1;

        .text {
            display: inline-block;
            position: relative;
            left: 3rem;
            top: -3.5rem;
        }
    }
}


.text {
    display: inline-block;
    width: 100px;
    // margin-top: 10px;
    margin-left: 15px;
    color: #ffffff;

    margin-top: 3px;

    p {
        font-kerning: normal;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        color: #ffffff;
    }

    span {
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-style: normal;
        color: #68f4fb;
    }
}

.hysy_box {
    margin: 1px;
}
</style>