博客

**

china.js显示中国地图

//运用vue写的
```var app = new Vue({
    el: '#app',
    data: {
        points:[],//各个省份下的客户数量
        maxDate:'',
        tableData: []
    },
    methods: {
//在后台查出要显示的数据``
        getRatioData: function () {
            var self = this;
            axios1.post(appCtx.ctxPath + '/action/portal/accnt/queryAccont', {

            }).then(function (res) {
                res.data.reportFormList.forEach(function(item){
                    self.points.push(item);
                });
                self.initTotalAndCompletion();
            }, function (res) {

            });
        },
        initTotalAndCompletion : function () {
            var that = this;
            echarts.init(document.getElementById('totalS')).setOption(
                {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        //data:['iphone7']
                    },
                    visualMap: {
                        min: 0,
                        max: 1,
                        //left: 'left',
                        //top: 'bottom',
                        //text: ['高','低'],           // 文本，默认为数值文本
                        //calculable: true
                        show: false
                    },
                    toolbox: {
                        show: false,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '合作客户数量',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:that.points,
                        }
                    ]
                }
            )
        },
    },
    mounted() {
        this.getRatioData();
    }
});


//前端
    <div id="totalS"   style="background-color:white;width: 100%;max-height:500px;min-height: 500px;margin-top: 20px;"></div>

js的话引入一个china.js 和echarts.min.js就可以了!