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,
            }
        },
        mounted: function () {
            var that =this;
      
            this.$nextTick(function () {
                that.chart = echarts.init(document.getElementById(that.chartid));
               
                    that.chart.setOption(defaults);  //试着一下
   
            })

        },

        methods: {
            setOption: function (options) {
                if(!options)return
                var options = $.extend({}, defaults, options);
                return options
            }
        },
        watch: {
            config: function (data) {
                if (data) {
                    this.chart.setOption(this.setOption(data));
                }
            }
        }
    })
    var  defaults = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
            min: 800,
            max: 50000,
            text:['High','Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#c5ddff','#62a3ff', '#277eff', '#005adc', '#0146ad']
            }
        },
        series: [
            {
                type: 'map',
                mapType: '贵港', // 自定义扩展图表类型
                itemStyle:{
                    normal:{
						label:{
							show:true,
							color: '#fff'
						},
						borderColor: '#fff',
						shadowColor: '#0355ab',
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10
					},
                    emphasis:{
						label:{
							show:true,
							color: '#fff'
						}
					}
                },
                data:[
                    {name: '港北区', value: 20057.34},
                    {name: '港南区', value: 15477.48},
                    {name: '桂平市', value: 31686.1},
                    {name: '平南县', value: 6992.6},
                    {name: '覃塘区', value: 44045.49}
                ],
				selectedMode: 'single'
            }
        ]
       }
})()