水文水环境分析-洪水淹没：修改饼图为柱状图

guoshilong

2023-02-04 25abe638055cfaac018af519686caa42be684d7f

水文水环境分析-洪水淹没：修改饼图为柱状图

 corelib/common/popup/js/evaluateAnalysis.js

@@ -2,13 +2,18 @@
    //获取父窗口传来的数据
    var data = JSON.parse(GetQueryString("data"))
    //配置饼图数据
    var pieData = []
    var nameData=[]
    var houseData = []
    var peopleData = []
    var areaData = []
    var moneyData = []
    if (data.length>0){
        data.forEach(e=>{
            pieData.push({
                value : e.people,
                name:e.name
            })
            nameData.push(e.name)
            houseData.push(e.house)
            peopleData.push(e.house)
            areaData.push(e.area)
            moneyData.push(e.area)
        })
    }
    // change事件
@@ -34,46 +39,115 @@

    //加载饼图
    function loadEcharts(){

        var echartsOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 0
                    },
                    label: {
                        show: true,
                        position: 'left'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: pieData
                }
            ]
        }

        var chartDom = document.getElementById('evaluate-echarts');
        var myChart = echarts.init(chartDom);
        var app = {}
        app.config = {
            rotate: 0,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideLeft',
            distance: 15,
            onChange: function () {
                const labelOption = {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                };
                myChart.setOption({
                    series: [
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        },
                        {
                            label: labelOption
                        }
                    ]
                });
            }
        };
        const labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };
        var echartsOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            xAxis: [
                {
                    type: 'value',
                    axisTick: { show: false },
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: nameData
                }
            ],
            series: [
                {
                    name: '受淹户数(户)',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: houseData
                },
                {
                    name: '受淹人口(人)',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: peopleData
                },
                {
                    name: '受淹居民地面积(km²)',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: areaData
                },
                {
                    name: '受淹房屋价值(万元/人)',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: moneyData
                }
            ]
        };

        echartsOption&&myChart.setOption(echartsOption,true);
    }


 widgets/FloodAnalysis/Widget.js

@@ -42,6 +42,7 @@
            canvasImage:null,
            //房屋人口
            peoplePositionArray:[],
            myWaterPrimitive:null,
            startup: function () {
                this.inherited(arguments);
                var self = this;
@@ -109,7 +110,7 @@
                    this.material = this.prepareMaterial();
                    this.riverPrimitive && this.map.scene.primitives.remove(this.riverPrimitive);
                    this.riverPrimitive = this.createPrimitive();
                    this.map.scene.primitives.add(this.riverPrimitive);
                    this.myWaterPrimitive = this.map.scene.primitives.add(this.riverPrimitive);
                }
            },
            prepareVertex: function () {