bigScreenShow/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(defaults);  //试着一下
                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 (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'
            }
        ]
       }
})()