real3d-portalsite/src/views/cockpitNew/wpjg.vue

<template>
    <div class="wpjg">
        <div class="box">
            <div id="wpjp_echart">

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

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

export default {
    components: {},
    data() {
        return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},

    beforeCreate() { }, //生命周期 - 创建之前
    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    methods: {
        getRenKou() {
            var dom = document.getElementById('wpjp_echart');
            var myChart = window.echarts.init(dom);

            let data = [
                { name: '疑似新增建设', value: 30 },
                { name: '耕地变化', value: 40 },
                { name: '建设和设施农用地变化', value: 50 },
                { name: '非耕农用地变化', value: 24 },
                { name: '耕地变化', value: 24 },
                { name: '新增围填海', value: 24 },
            ]
            for (var i = 0; i < data.length; i++) {
                for (var j = i + 1; j < data.length; j++) {
                    //如果第一个比第二个大，就交换他们两个位置
                    if (data[i].value < data[j].value) {
                        var temp = data[i];
                        data[i] = data[j];
                        data[j] = temp;
                    }
                }
            }
            let pm = []
            for (var i = 0; i < data.length; i++) {
                let k = i + 1
                pm.push('NO.' + k)
            }
            data.forEach(function (value, index, obj) {
                value.pm = pm[index]
            })
            console.log('ssss', data)
            const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
            const chartData = data.map((item, index) => ({
                value: item.value,
                name: item.name,
                pm: item.pm,
                itemStyle: {
                    shadowBlur: 20,
                    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
                    shadowOffsetx: 25,
                    shadowOffsety: 20,
                    color: colors[index % colors.length],
                },
            }))
            const sum = chartData.reduce((per, cur) => per + cur.value, 0)
            const gap = (1 * sum) / 100
            const pieData1 = []
            const gapData = {
                name: '',
                value: gap,
                itemStyle: {
                    color: 'transparent',
                },
            }
            let totalRatio = []
            // let totalPercent = 0
            for (let i = 0; i < chartData.length; i++) {
                // 计算占比
                // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
                // 累加占比到总占比中
                // totalRatio.push(ratio*100)
                let ratio = (chartData[i].value / sum) * 100
                let percent = Math.round(ratio)
                totalRatio.push(percent)
                // totalPercent += percent
                // 第一圈数据
                pieData1.push({
                    ...chartData[i],
                })
                pieData1.push(gapData)
            }
            // 补充最后一项占比百分比保证之和为100%
            // totalRatio[0].value += 100 - totalPercent
            let option = {
                backgroundColor: 'rgba(1,1,1,0)',
                title: {
                    show: true,
                    // text: sum
                    text: '变化类型',
                    x: '49%',
                    y: '32%',
                    itemGap: 6,
                    textStyle: {
                        color: '#fff',
                        fontSize: 11,
                        fontWeight: '400',
                        lineHeight: 8,
                    },
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 8,
                        fontWeight: '400',
                        lineHeight: 8,
                    },
                    textAlign: 'center',
                },

                // 图例
                legend: {
                    show: true,
                    orient: 'vertical',
                    icon: 'rect',
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    top: '5%',
                    left: '70%',
                    itemGap: 14,
                    itemHeight: 14,
                    itemWidth: 14,
                    data: chartData,
                    formatter: function (name) {
                        const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
                        // if (selectedItem) {
                        //     const { value } = selectedItem;
                        //     const { pm } = selectedItem;
                        //     console.log('dddd', selectedItem)
                        //     const p = ((value / sum) * 100).toFixed(2);
                        //     const area = `${value}m²`;
                        //     // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);

                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
                        // } else {
                        //     console.log(name);

                        //     return name;
                        // }

                        if (selectedItem) {
                            console.log();

                            return name + selectedItem.value + "个";

                        }
                    },
                },
                series: [
                    // 中间圆环
                    {
                        name: '',
                        type: 'pie',
                        roundCap: true,
                        radius: ['36%', '52%'],
                        center: ['50%', '35%'],
                        data: pieData1,
                        labelLine: {
                            length: 8,
                            length2: 16,
                            lineStyle: {
                                width: 1,
                            },
                        },
                        label: {
                            show: false,
                            fontFamily: 'ysbth',
                            position: 'outside',
                            padding: [0, -4, 0, -4],
                            formatter(params) {
                                if (params.name === '') {
                                    return ''
                                }
                                return `${params.percent.toFixed(0)}% `
                            },
                            color: '#fff',
                            fontSize: '14px',
                            lineHeight: 10,
                        },
                        emphasis: {
                            // 鼠标移入时显示
                            label: {
                                show: true,
                            },
                        },
                    },
                    // 最里面圆环
                    {
                        type: 'pie',
                        radius: ['28%', '30%'],
                        center: ['50%', '35%'],
                        animation: false,
                        hoverAnimation: false,
                        data: [
                            {
                                value: 100,
                            },
                        ],
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            color: '#3BC5EF',
                        },
                    },
                    // 最里面圆环内的背景圆
                    {
                        name: '',
                        type: 'pie',
                        startAngle: 90,
                        radius: '28%',
                        animation: false,
                        hoverAnimation: false,
                        center: ['50%', '35%'],
                        itemStyle: {
                            labelLine: {
                                show: false,
                            },
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(50,171,241, 0)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(50,171,241, .4)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(55,70,130, 0)',
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            shadowBlur: 60,
                        },
                        data: [
                            {
                                value: 100,
                            },
                        ],
                    },
                    // 最外面的圆环
                    {
                        type: 'pie',
                        color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
                        radius: ['53%', '54%'],
                        center: ['50%', '35%'],
                        label: {
                            show: false,
                        },
                        select: {
                            display: false,
                        },
                        tooltip: {
                            show: false,
                        },
                        data: totalRatio,
                    },
                ],
            }

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

    border-width: 0px;
    position: absolute;
    left: 1366px;
    top: 68%;
    display: -ms-flexbox;
    display: flex;

    .box {
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        letter-spacing: normal;
        color: #333333;
        text-align: center;
        line-height: normal;
        text-transform: none;
        border-width: 0px;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 535px;
        height: 260px;
        background: inherit;
        background-color: rgba(3, 25, 67, 0.698039215686274);
        border: none;
        border-radius: 0px;
        box-shadow: none;
        background-repeat: no-repeat;
        background-size: 100% 47%;
        background-image: url("/static/images/cockpitNew/wpjg.png");


        #wpjp_echart {
            width: 580px;
            height: 230px;
            position: relative;
            left: -28%;
            top: 40%;
        }


    }
}
</style>