real3d-portalsite/src/views/cockpit/hysy.vue

<template>
    <div class="hysy">
        <div class="title">
            <div class="icon"></div>
            <span>海域使用权出让</span>
        </div>

        <div class="content_hysy">
            <div class="space">
                <div class="lt_box box">
                    <div class="text">
                        <p>计划出让海域</p>
                        <span>{{ store.state.cockpit_hysy.info.jh_mj }}</span>公顷
                    </div>
                </div>
                <div class="lb_box box">
                    <div class="text">
                        <p>完成出让海域</p>
                        <span>{{ store.state.cockpit_hysy.info.sj_mj }}</span>公顷
                    </div>
                </div>

                <div id="dial_watch_hysy">
                </div>

                <div class="rt_box box">
                    <div class="text">
                        <p>计划出让项目</p>
                        <span>{{ store.state.cockpit_hysy.info.jh_number }}</span>个
                    </div>
                </div>
                <div class="rb_box box">
                    <div class="text">
                        <p>完成出让项目</p>
                        <span>{{ store.state.cockpit_hysy.info.sj_number }}</span>个
                    </div>
                </div>
            </div>
            <div id="hysyEchart">

            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryOne, QueryList } from "../../api/cockpitNew";
export default {
    components: {},
    data() {
        return {
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    beforeCreate() { }, //生命周期 - 创建之前
    created() {

    }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    methods: {
        init_hysyEchart() {

            var dom = document.getElementById("hysyEchart");
            var myChart = window.echarts.init(dom);
            var myChart = window.echarts.init(dom);
            // Mock数据
            const mockData = {
                xdata: store.state.cockpit_hysy.echart.xdata,
                result: store.state.cockpit_hysy.echart.result
            }

            const color = [
                [{ offset: 0, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(249, 180, 71, 0.8)' }, { offset: 1, color: 'rgba(249, 180, 71, 0.8)' }],

                [{ offset: 0, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(97, 173, 237, 0.8)' }, { offset: 1, color: 'rgba(97, 173, 237, 0.8)' }],

            ]
            const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]

            // tooltip
            const tooltip = {
                trigger: "axis",
                textStyle: { fontSize: '100%' },
                formatter: params => {
                    let rander = params.map(item => `<div>${item.seriesName}: ${item.value}</div>`).join('')
                    return rander
                }
            }

            const legend = {
                data: ['计划出让', '完成出让'],      //图例名称

                textStyle: { fontSize: 12, color: '#fff' },
                itemWidth: 24,
                itemHeight: 15,
                itemGap: 15,
                top: '-4%',
                right: '2%',
                selectedMode: false
            }
            const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
            // xAxis
            const xAxis = {
                axisTick: { show: false },
                axisLine: { lineStyle: { color: '#BCD3E5' } },
                axisLabel: {
                    textStyle: { fontSize: 12, color: '#BCD3E5' },
                },
                axisLabel: {
                    interval: 0,
                    formatter: function (value) {
                        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
                        if (value.length > 4) {
                            return `${value.slice(0, 4)}...`;
                        } else {
                            return value;
                        }
                    },
                },
                data: mockData.xdata,
            }

            // yAxis
            const yAxis = [{
                axisTick: { show: false },
                axisLine: { show: false },
                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
                axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
            }, {
                show: false,
                splitLine: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
            }]
            // const diamondData = mockData.result.reduce((pre, cur, index) => {
            //     pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
            //     return pre
            // }, [])

            let series = mockData.result.reduce((p, c, i, array) => {
                p.push({
                    z: i + 1,
                    stack: '总量',
                    type: 'bar',
                    name: c.name,
                    barGap: 18,
                    barWidth: 18,
                    data: c.data,
                    itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
                }, {
                    z: i + 10,
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    symbol: 'diamond',
                    symbolOffset: [0, '-50%'],
                    symbolSize: [18, 12],
                    data: mockData.result[i],
                    itemStyle: { color: color2[i] },
                    tooltip: { show: false },
                })

                // 是否最后一个了？
                if (p.length === (array.length) * 2) {
                    p.push({
                        z: array.length * 2,
                        type: "pictorialBar",
                        symbolPosition: "start",
                        data: mockData.result[0].data,
                        symbol: "diamond",
                        symbolOffset: ["0%", "50%"],
                        symbolSize: [18, 10],
                        itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
                        tooltip: { show: false },
                    })
                    return p
                }

                return p
            }, [])

            const dataZoom = [{
                show: false,
                type: 'slider',
                startValue: 0,
                endValue: 7,
                moveOnMouseWheel: true,
                moveOnMouseMove: true,
                zoomOnMouseWheel: false,
            }]

            let option = {

                tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
            }


            myChart.setOption(option);

        },
        init_dial_watch_hysy() {

            var dom = document.getElementById("dial_watch_hysy");
            var myChart = window.echarts.init(dom);
            var demoData = {
                name: '城镇化率',
                value: 60,
            };
            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);

        },
        async init_info(params) {
            const that = this;
            let obj = {
                jscType: 'jsc_hysyq_ztsh',
                beginTime: params ? params.beginTime : store.state.cockpit_date[0],
                endTime: params ? params.endTime : store.state.cockpit_date[1],
                id: params ? params.id : '4602'
            };
            let data = await QueryList(obj);
            store.state.cockpit_hysy.info = data.data[0]
        },
        async init_echart_data(params) {
            const that = this;
            let obj = {
                jscType: 'jsc_hysyq_yelx',
                beginTime: params ? params.beginTime : store.state.cockpit_date[0],
                endTime: params ? params.endTime : store.state.cockpit_date[1],
                id: params ? params.id : '4602'
            };
            let data = await QueryList(obj);
            console.log('data: ', data);

            let xdata = [];
            let result = [
                {
                    name: "计划出让",
                    data: []
                },
                {
                    name: "完成出让",
                    data: []
                }
            ];
            data.data.forEach((res) => {
                xdata.push(res.yhlx_name);
                result[0].data.push(res.jh_mj);
                result[1].data.push(res.sj_mj);

            })

            store.state.cockpit_hysy.echart.xdata = xdata
            store.state.cockpit_hysy.echart.result = result
            that.init_hysyEchart();

        }
    },
    mounted() {
        const that = this;
        this.$nextTick((res) => {
            that.init_dial_watch_hysy();

            this.init_info();
            this.init_echart_data();

        })
    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroy() { },//生命周期 - 销毁完成
    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>



<style lang="scss"  scoped>
.hysy {
    border-width: 0px;
    position: absolute;
    left: 55rem;
    top: 35.3rem;
    width: 559px;
    height: 270px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 100;
}



.title {
    width: 1071rem;
    height: 40px;
    background: no-repeat;
    background-size: 116% 100%;
    background-image: url("/static/images/overview/标题框.png");

    .icon {
        background: no-repeat;

        background-image: url("/static/images/overview/icon_标题框装饰.png");
        display: inline-block;
        width: 30px;
        height: 30px;
        background-position: 14px 7px;
    }

    span {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        position: relative;
        bottom: 0.5rem;
    }
}

.content_hysy {
    position: fixed;
    top: 40rem;

    #dial_watch_hysy {
        // border: 1px red solid;
        width: 26rem;
        height: 8.5rem;
        position: relative;
        left: 3rem;
        bottom: 1rem;
    }

    #hysyEchart {
        // border: 1px red solid;
        width: 34rem;
        height: 9rem;
    }

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

    }

    .lt_box {

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

    .lb_box {

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

        background-image: url("/static/images/overview/lbback.png");
        left: 57rem;
        top: 44.5rem;

    }

    .rt_box {
        position: fixed;
        background: no-repeat;
        background-size: 101% 50%;

        background-image: url("/static/images/overview/rtback.png");
        left: 76rem;
        top: 41.5rem;


        .text {
            margin-left: 4rem;
        }
    }

    .rb_box {
        position: fixed;
        background: no-repeat;
        background-size: 101% 50%;
        background-image: url("/static/images/overview/rbback.png");
        left: 76rem;
        top: 44.5rem;
        z-index: 100;

        .text {
            margin-left: 4rem;
        }
    }
}


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

    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;
        // margin-bottom: ;
    }

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