app-big-data/component/chart/map-chart.js

(function () {
    Vue.component('map-chart', {
        template: '<div class="chart_box" >\
                        <div :id="chartid" class="chart_box"></div>\
                    </div>',
        props: ['config'],
        data: function () {
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
                lastIndex: null
            }
        },
        mounted: function () {
            var that = this;

            this.$nextTick(function () {
                that.chart = echarts.init(document.getElementById(that.chartid));
                that.chart.setOption(that.setOption()); //试着一下
                this.chart.on('click', function (params) { //点击事件
                    that.$emit('clickMap', params) //传给外面点击事件
                    if (params.componentType === 'series') {
                        if (that.lastIndex !== null) {
                            that.chart.dispatchAction({ //把上一个高亮的取消掉
                                type: 'downplay',
                                seriesIndex: 0,
                                dataIndex: that.lastIndex
                            })
                        }
                        that.$emit('map-click', params)
                        that.lastIndex = params.dataIndex //高亮现在这个
                        that.chart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: params.dataIndex
                        })
                    }
                })

            })

        },

        methods: {
            setOption: function () {
                var options=JSON.parse(JSON.stringify(defaults));
                if(this.config){
                    var maxValue =0;
                    this.config.data.map(function(v){
                          if(v.value){
                            maxValue =  Math.max(maxValue,parseInt(v.value || 0));
                            maxValue = Math.ceil(maxValue/5)*5
                          }             
                        })
                        var piceArr = this.getPiceArr(maxValue)
                        options.visualMap = {
                            text: null,
                            color: ['#62a3ff', '#bdcfe5', '#c5ddff'],
                            pieces: piceArr,
                            textStyle: {
                                color: '#b5e1fc'
                            },
                            left: '50'
                        }
                        options.series[0].zoom = this.config.zoom || 1.2;
                        options.series[0].data = this.config.data;
                }              
                return options
            },
            getPiceArr(max, num) {
                var lastArr = [];
                if (max == 0) {
                    lastArr = [{
                        max: 0,
                        min: 0,
                        label: '0'
                    }]
                } else {
                    var divisor = max > 10000 ? 10000 : (max > 1000 ? 1000 : 100); //最小区间跨度值
                    var unitSpan = divisor >= 10000 ? 10000 : 1; //计算单位用
                    var _num = num || (max / divisor > 5) ? 5 : (max / divisor); //区间取值次数
                    var _span = (max / _num); //刚好区间跨度，需调整
                    _span = ((_span + '').match(/0/ig) && (_span + '').match(/0/ig).length) == (((_span + '').split('.'))[0].length - 1) ? _span : (((_span + '').substr(0, 1) | 0) + 1) + Array(((_span + '').split('.'))[0].length).join(0); //区间跨度，可能需要进位 0填充等
                    var company = _span >= 10000 ? '万' : ''; //区间单位
                    _num = num || Math.ceil(max / _span); //重新计算区间次数
                    for (var j = 0; j < _num; j++) {
                        lastArr.push({
                            min: _span * (_num - j - 1),
                            max: _span * (_num - j),
                            label: (_span * (_num - j - 1) / unitSpan) + company + "-" + (_span * (_num - j) / unitSpan) + company
                        })
                    }
                }
                return lastArr;
            },
            closeLineHeight(index) {
                var that = this;
                if (index) that.lastIndex = index
                if (that.lastIndex === null) return

                that.chart.dispatchAction({ //把上一个高亮的取消掉
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: that.lastIndex
                })
            },
            selectLineHeight(index){   //高亮某个区县   传入城市名  获得对应下标 然后高亮
                var that  =this;
                this.closeLineHeight();
                var isExit = false;
                this.config.data.map(function(v,i){
                    console.log(v)
                    console.log(index)
                    if(v.name == index) {
                        console.log(i)
                        that.lastIndex =i;
                        isExit=true
                    }
                })
                // this.lastIndex = index;
                if(isExit)
                this.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex:  that.lastIndex 
                })
            }
        },
        watch: {
            config: function (data) {
                if (data) {
                    this.chart.setOption(this.setOption());
                    if(data.index !== null)this.selectLineHeight(data.index)
                }
            }
        }
    })
    var defaults = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (人次)'
        },      
        series: [{
            type: 'map',
            mapType: '贵港', // 自定义扩展图表类型
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        color: '#002f9c'
                    },
                    borderColor: '#fff',
                    shadowColor: '#0355ab',
                    shadowBlur: 10,
                    shadowOffsetX: 10,
                    shadowOffsetY: 10
                },
                emphasis: {
                    label: {
                        show: true,
                        color: '#002f9c'
                    },
                    areaColor: '#00e9fa',
                }
            },
            data: [{
                    name: '港北区',
                    value: 20057.34
                },
                {
                    name: '港南区',
                    value: 15477.48
                },
                {
                    name: '桂平市',
                    value: 31686.1
                },
                {
                    name: '平南县',
                    value: 6992.6
                },
                {
                    name: '覃塘区',
                    value: 44045.49
                }
            ],
            selectedMode: 'single'
        }],

    }
})()