鍍金池/ 問答/HTML/ vue 和highcharts結(jié)合使用制作中國(guó)地圖問題

vue 和highcharts結(jié)合使用制作中國(guó)地圖問題

vue-cil中出現(xiàn)這個(gè)為題

clipboard.png

代碼如下

    let url="https://data.jianshukeji.com/jsonp?filename=geochina/";
    this.$ajax.get(url+ 'china.json&callback=?',).then(response =>{
             console.log(response);
             // 隨機(jī)數(shù)據(jù)
             var data = [
                 {drilldown:"beijing",name:"北京",value:61}
             ];
             Highcharts.each(mapdata.features, function(md, index) {
                data.push({
                    name: md.properties.name,
                    drilldown: md.properties.filename,
                    value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 隨機(jī)值
                });
            });
            HighCharts.Map('container', {
                    title: {
                        text: null
                    },
                    legend: {
                        symbolWidth:30,
                        layout: 'vertical',
                        align: 'left',
                        verticalAlign: 'bottom'
                    },
                    colorAxis: {
                        min: 0,
                        minColor: '#005BCE',
                        maxColor: '#A3E4FA',
                        labels:{
                            style:{
                                "color":"#818387"
                            }
                        }
                    },
                    series: [{
                        data: data,
                        mapData: response,
                        joinBy: 'name',
                        name: '中國(guó)地圖',
                        dataLabels: {
                            enabled: true,
                            color:'#11205B',
                            format: '{point.properties.name}'
                        },
                        states: {
                            hover: {
                                color: '#a4edba'
                            }
                        }
                    }]
                });
         })
    }
回答
編輯回答
冷咖啡

參考簡(jiǎn)數(shù)的博客教程:http://blog.jianshukeji.com/2... (示例中包含地圖)

2017年11月5日 03:08
編輯回答
真難過

我也遇到了,解決了沒有

2017年5月25日 16:58