feigao

今天写项目需要一个安徽地图,但echart自带的安徽地图还是老版的,仍有巢湖市,但客户要求不能有,只好重新找,

后发现ECharts 地图数据在线生成工具 :http://ecomfe.github.io/echarts-map-tool/ 生成的json文件安徽省是新版本的,就使用echart的扩展地图功能

照着

写了一遍总是echart.util报错,最后仔细找了下api。发现

最后这样写才没有错误显示。但是地图一直加载不出来。后面看里面的格式以为是自己下的json是压缩版的就勾掉了压缩准备先试试看是不是解码有问题

下载后发现数据好像是一样的,最后仔细观察居然都是93K,完全没有什么卵用~话说百度你是来搞笑的嘛~

没办法就在网上找啊找啊,找到很多说本地解析不了json,我就信了,重新建个项目,拖进去,运行~嚯~又白忙活了

那没办法啊,只能试试其他地图了,下了个中国地图,md居然可以!难道是安徽地图json炸了?然后我就试试钩去了,看看是不是这个问题

居然显示了

卧槽。和我想的一样。合肥也没了。。。

最后看了下json格式,又想了想前面的93k,发现很大可能是编码的问题。就想着解码下这个json

用这个方法一直报错,妈的只好在找api,发现这个和上面的格式是一样的就试了试

require(\'echarts/util/mapData/params\').params.decode(data)

还是报错,最后就用js的decodeURI()试了试。还是不行~就在我要放弃的时候。一个不小心写成了

require(\'echarts/util/mapData/params\').decode(data)

md !!!!!!!! 居然显示了

万恶的巢湖也没了,我的天~

 

最后献上代码

 require(\'echarts/util/mapData/params\').params.anhui = {
        getGeoJson: function (callback) {
            $.getJSON(\'geoJson/anhui.json\', function (data) {
                // 压缩后的地图数据必须使用 decode 函数转换
                callback(require(\'echarts/util/mapData/params\').decode(data));
            });
        }
    }

附加套餐:

1.鼠标移动事件

  var ecConfig = require(\'echarts/config\');
    myChart.on(ecConfig.EVENT.HOVER, function (param) {
        var selectedName = param.name;
        showTextInfo(selectedName);//通过选择的市名显示信息
    })

2.自定义formatter (再也不用担心只显示一个了),这里用的是静态数据~

    var data_school = [
                    { name: \'六安市\', value: 10 },
                    { name: \'安庆市\', value: 10 },
                    { name: \'滁州市\', value: 10 },
                    { name: \'宣城市\', value: 10 },
                    { name: \'阜阳市\', value: 10 },
                    { name: \'宿州市\', value: 10 },
                    { name: \'黄山市\', value: 10 },
                    { name: \'亳州市\', value: 10 },
                    { name: \'池州市\', value: 10 },
                    { name: \'合肥市\', value: 10 },
                    { name: \'蚌埠市\', value: 10 },
                    { name: \'芜湖市\', value: 10 },
                    { name: \'淮北市\', value: 10 },
                    { name: \'淮南市\', value: 10 },
                    { name: \'马鞍山市\', value: 10 },
                    { name: \'铜陵市\', value: 10 }
    ]

    var data_specialty = [
                    { name: \'六安市\', value: 20 },
                    { name: \'安庆市\', value: 20 },
                    { name: \'滁州市\', value: 20 },
                    { name: \'宣城市\', value: 20 },
                    { name: \'阜阳市\', value: 20 },
                    { name: \'宿州市\', value: 20 },
                    { name: \'黄山市\', value: 20 },
                    { name: \'亳州市\', value: 20 },
                    { name: \'池州市\', value: 20 },
                    { name: \'合肥市\', value: 20 },
                    { name: \'蚌埠市\', value: 20 },
                    { name: \'芜湖市\', value: 20 },
                    { name: \'淮北市\', value: 20 },
                    { name: \'淮南市\', value: 20 },
                    { name: \'马鞍山市\', value: 20 },
                    { name: \'铜陵市\', value: 20 }
    ]

    require(\'echarts/util/mapData/params\').params.anhui = {
        getGeoJson: function (callback) {
            $.getJSON(\'geoJson/anhui.json\', function (data) {
                // 压缩后的地图数据必须使用 decode 函数转换
                callback(require(\'echarts/util/mapData/params\').decode(data));
            });
        }
    }

    // 基于准备好的dom,初始化echarts图表
    var myChart = ec.init(document.getElementById(\'echartDiv\'));

    option = {
        title: {
            text: \'\',
            subtext: \'\',
        },
        tooltip: {
            trigger: \'item\',
            formatter: function (a) {
                res = a[1] + \'</br>共 \' + a[2] + \' 个建设项目\';
                for (var i = 0; i < data_school.length; i++) {
                    if (a[1] == data_school[i].name) {
                        res += \'</br>学校:\' + data_school[i].value;
                    }
                    if (a[1] == data_specialty[i].name) {
                        res += \'</br>专业:\' + data_specialty[i].value;
                    }
                }
                return res;
            }
        },
        toolbox: {
            show: true,
            orient: \'vertical\',
            x: \'right\',
            y: \'bottom\',
            feature: {
                saveAsImage: { show: true }
            }
        },
        dataRange: {
            min: 0,
            max: 500,
            text: [\'多\', \'少\'],
            realtime: false,
            calculable: true,
            color: [\'orangered\', \'yellow\', \'lightskyblue\']
        },
        series: [
            {
                name: \'\',
                type: \'map\',
                mapType: \'anhui\', // 自定义扩展图表类型
                selectedMode: false,
                itemStyle: {
                    normal: { label: { show: true } },
                    emphasis: { label: { show: true } }
                },
                data: [
                    { name: \'六安市\', value: Math.round(Math.random() * 500) },
                    { name: \'安庆市\', value: Math.round(Math.random() * 500) },
                    { name: \'滁州市\', value: Math.round(Math.random() * 500) },
                    { name: \'宣城市\', value: Math.round(Math.random() * 500) },
                    { name: \'阜阳市\', value: Math.round(Math.random() * 500) },
                    { name: \'宿州市\', value: Math.round(Math.random() * 500) },
                    { name: \'黄山市\', value: Math.round(Math.random() * 500) },
                    { name: \'亳州市\', value: Math.round(Math.random() * 500) },
                    { name: \'池州市\', value: Math.round(Math.random() * 500) },
                    { name: \'合肥市\', value: Math.round(Math.random() * 500) },
                    { name: \'蚌埠市\', value: Math.round(Math.random() * 500) },
                    { name: \'芜湖市\', value: Math.round(Math.random() * 500) },
                    { name: \'淮北市\', value: Math.round(Math.random() * 500) },
                    { name: \'淮南市\', value: Math.round(Math.random() * 500) },
                    { name: \'马鞍山市\', value: Math.round(Math.random() * 500) },
                    { name: \'铜陵市\', value: Math.round(Math.random() * 500) }
                ]
            }
        ]
    };

 

 

到此~ok~此时应有掌声

分类:

技术点:

相关文章: