Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/cockpitNew/wpjg.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="wpjg">
         <div class="box">
+            <div id="wpjp_echart">
 
+            </div>
         </div>
     </div>
 </template>
@@ -18,12 +20,273 @@ export default {
     computed: {},
     //监控data中的数据变化
     watch: {},
-    //方法集合
-    methods: {},
+
     beforeCreate() { }, //生命周期 - 创建之前
     created() { }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
-    mounted() { }, //生命周期 - 挂在完成
+    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() { }, //生命周期 - 销毁之前
@@ -33,7 +296,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-
 .wpjg {
 
     border-width: 0px;
@@ -42,32 +304,42 @@ export default {
     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: 90% 98%;
-    background-image: url("/static/images/cockpitNew/wpjg.png");
+    .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>