fj-dc-ui/.svn/pristine/ea/ea6b706fc88e01b3eab95b227aa1c6c58255b6ea.svn-base

<!--  -->
<template>
    <div style="width:100%;height:100%;">
        <div style="width:100%;height:100%;">
            <div id="syMainMapContainer" style="width: 100%;height: calc(100% - 40px);">
                <div style="width:100%;height:100%;" id="mapChart"></div>
            </div>
        </div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import echarts from 'echarts'
    import axios from 'axios' //引入axios
    // import theme from '../../store/theme'
    export default {
        //import引入的组件需要注入到对象中才能使用
        props: ['useAddv', 'mapData', 'focusType', 'mapTitleFocusName', 'mapPointColor', 'barsChooseUnit'],
        components: {},
        data() {
            //这里存放数据
            return {
                addvCenters: {},
                mapName: 'china',
                firstToOn: true,
                themeColor: '#000',
                themeColorMap: 'rgb(195,240,255)',
                mapBorderColor: '#778387',
                customSettings: [],
                noDataArr:[]
            };
        },
        //监听属性 类似于data概念
        computed: {
            msg() {
                // return theme.state.testMsg;
                return this.$store.state.theme.testMsg;
            },
            symbolSize() {
                if (window.innerWidth <= 1366) {
                    return 40;
                } else {
                    return 50;
                }
            },
            organNm() {
                return localStorage.getItem('currentOrgNm') ? localStorage.getItem('currentOrgNm') : ''
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
            isNational() {
                return this.organCode.indexOf('00') == 0 ? true : false
            },
            currentOrgId() {
                return localStorage.getItem('currentOrgId') ? localStorage.getItem('currentOrgId') : ''
            }
        },
        //监控data中的数据变化
        watch: {
            mapData: function () {
                this.mapName = this.organNm
                this.refreshTheChart();
            },
            msg(n, o) {
                if (n == 'dark') {
                    this.themeColor = 'rgba(177, 210, 254, 1)';
                    this.themeColorMap = 'rgb(32,66,160)';
                    this.mapBorderColor = '#0380c3';
                    this.refreshTheChart();
                } else {
                    this.themeColor = '#000';
                    this.themeColorMap = 'rgb(195,240,255)';
                    this.mapBorderColor = '#778387';
                    this.refreshTheChart();
                }
            }
        },
        //方法集合
        methods: {
            getTheCustomGeoDataByOrg(originalGeoJson, useAdName) {
                /*该方法接收原本的geoJson，从中挑选出所选机构涉及的行政区(其余的不要了) */
                let usedGeoJson = [];
                let originalGeoObject = {};

                originalGeoJson.features.forEach(item => {//将要处理的originalGeoJson的Features数组转化为以adCode做key的对象，方便后续根据业务数据进行查找，避免嵌套循环
                    originalGeoObject[item.id] = item;
                });
                this.mapData.forEach((dataItem) => {//根据业务数据，将业务数据包含的行政区划代码对应的geo数据放到数组里以过滤不涉及的行政区划
                    if (originalGeoObject[dataItem.adCode.substr(0, 6)]) {
                        usedGeoJson.push(originalGeoObject[dataItem.adCode.substr(0, 6)]);
                    }
                });
                if(usedGeoJson.length==0){
                    originalGeoJson.features.forEach((dataItem) => {//根据业务数据，将业务数据包含的行政区划代码对应的geo数据放到数组里以过滤不涉及的行政区划
                        usedGeoJson.push(dataItem);
                    });
                    this.noDataArr = originalGeoJson.features;
                }
                console.log(usedGeoJson)
                let _self = this;
                usedGeoJson.forEach(item => {//在挑选完需要保留的geo数据后，将中间点取出单独存储，供散点图使用。防止过度嵌套的for循环影像效率。
                    _self.addvCenters[item.properties.name] = item.properties.cp;
                });
                // originalGeoJson.features = usedGeoJson;//将处理过后的features赋回原有对象，保持对象格式，便于echarts引用
                // 2019.06.19 因为政治问题保留全部数据
                return originalGeoJson;
            },

            convertData: function () {//制作散点数据。
                var res = [];
                let _self = this;
                let mapSeriesData = this.mapData;
                console.log(mapSeriesData);
                if(this.noDataArr.length==0){
                    for (var i = 0; i < mapSeriesData.length; i++) {
                        var geoCoord = _self.addvCenters[mapSeriesData[i].name];
                        if (geoCoord) {
                            res.push({
                                name: mapSeriesData[i].name,
                                value: geoCoord.concat(Number(mapSeriesData[i].total)),
                            });
                        }
                    }
                }else{
                    for(var i = 0;i<this.noDataArr.length;i++){
                        res.push({
                            name: this.noDataArr[i].properties.name,
                            value: 0,
                        });
                    }
                }
                return res;
            },
            getChartSeriesData: function () {
                let seriesData = this.convertData();
                console.log(seriesData);
                let color = ['#b9dd7d', '#b9dc7e','#ee9e9f', '#fffb9a', '#fffb9a', '#ee9c9e',
                    '#f6c992', '#b9dd7d', '#c6c', '#6363ff','#da70d6', '#32cd32',
                    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                    '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
                    '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'];
                //福建需求单独新增市级颜色区分
                //this.currentOrgId == "034"
                // if(){
                this.customSettings = seriesData.map(function (item, index) {
                    return {
                        name: item.name,
                        itemStyle: {
                            areaColor: color[index]
                        }
                    }
                })
                // }else{
                //     this.customSettings = [];
                // }
                return seriesData;
            },
            getChartOption: function () {
                console.log(this.mapData);
                let _this = this
                let seriesData = this.getChartSeriesData();
                let option = {
                    title: {
                        text: this.mapTitleFocusName + '数量分布情况',
                        left: 'center',
                        textStyle: {
                            color: this.themeColor
                        }
                    },
                    tooltip: {
                        show: false,
                    },
                    geo: {
                        itemStyle: {
                            normal: {
                                borderColor: this.mapBorderColor,
                                borderWidth: 1,
                            },

                        },
                        show: true,
                        map: this.mapName,
                        top: "80",
                        bottom: "30",
                        roam: true,
                        zoom: .9,
                        regions: this.customSettings,
                        selectedMode: false, //选中模式：single | multiple
                        left: 0,
                        right: 0,
                        layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
                        layoutSize: "100%",
                        label: {
                            normal: { //静态的时候展示样式
                                show: true, //是否显示地图省份得名称
                                textStyle: {
                                    color: "#000",
                                    fontSize: 12,
                                    fontFamily: "Arial"
                                }
                            },
                            // emphasis: { //动态展示的样式
                            //     color: '#43d0d6',
                            // }
                        },
                    },
                    // visualMap: {
                    //     show: false,
                    //     min: 1,
                    //     max: 20,
                    //     left: 'left',
                    //     top: 'bottom',
                    //     text: ['高', '低'],
                    //     textStyle: {
                    //         color: '#ccc'
                    //     },
                    //     calculable: true,
                    //     seriesIndex: [1],
                    //     inRange: {
                    //         color: ['#7ab751', '#cc66cc', '#36c', '#f93', '#86c583', '#ff9999', '#cc9933', '#66a13e', '#ff9933', '#6363ff']
                    //     }
                    // },
                    series: [
                        {
                            left: '20%',
                            tooltip: {
                                show: true,
                                formatter: function (params) {
                                    return params.name + ': ' + params.value[2] + ' ' + _this.barsChooseUnit
                                },
                            },
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin', //气泡
                            symbolSize: this.symbolSize,
                            // data: seriesData,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value[2]
                                    },
                                    textStyle: {
                                        fontSize: 12,
                                        color: "#ffffff"
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: this.mapPointColor,
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    borderType: 'solid',
                                }
                            }
                        },
                        {
                            type: 'map',
                            map: this.mapName,
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            animation: false,
                            roam: true,
                            // data: seriesData
                        },
                    ]
                };
                return option;
            },
            refreshTheChart: async function () {
                // 准备工作
                let _self = this;
                let myChart = echarts.init(document.getElementById('mapChart'));

                // 处理地图数据
                let geoAdcode = this.organCode.substr(0, 6)  //省级切换时获取不同的行政区代码
                let geoJsonResult = await this.getAddvGeoData(geoAdcode);// 根据行政区划代码请求地图geoJson
                let geoJson = _self.getTheCustomGeoDataByOrg(geoJsonResult.data, '');//根据可能的所选机构处理摘出需要的行政区数据
                echarts.registerMap(this.mapName, geoJson);//向echart注册地图

                // 获取option
                let option = _self.getChartOption();

                myChart.setOption(option, true);
                if (this.firstToOn) {
                    myChart.on('click', function (params) {//注册地图点击事件，上冒
                        if (params.componentSubType && params.componentSubType == 'scatter') {
                            //点击的为标记 应当出弹框
                            // let
                        } else if (params.componentSubType && params.componentSubType == 'map') {
                            //点击的为底图 应当下钻
                            let adName = params.name;
                            _self.mapData.forEach((dataItem) => {
                                if (dataItem.name == adName) {
                                    //确定点击行政区
                                    _self.$emit('mapClick', {
                                        'onClickAdCode': dataItem.adCode,
                                        'onClickAdName': dataItem.name
                                    });
                                }
                            });
                        }
                    });
                    this.firstToOn = false;
                }

            },
            getAddvGeoData: function (adCode) {
                // if(adCode=="120000"){
                //     adCode = "120100";
                // }
                let geoJsonName = adCode + "DATA.json";
                return axios.get('/src/assets/addvGeoData/' + geoJsonName);
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            // this.refreshTheChart();
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
        }, //生命周期 - 销毁之前
        destroyed() {
        }, //生命周期 - 销毁完成
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style scoped>

</style>