layui 更新echarts版本后地图报错

目前layui里面的echarts版本太低，不能满足项目需要，所以进行了echarts版本更新

1、如何更新

 echarts 官网进行下载：https://echarts.apache.org/zh/download.html

 点击 “在线制定”-》选择版本-》图表、坐标系、组件等，然后进行下载。选择图表和组件只需要选择你项目中需要用到的即可。

下载完成后再项目中把 echarts.js 进行替换，下面重点来了。

1.1、打开 echarts.js ,在文件最底部加上这段代码：

layui.define('echartsTheme',function(exports){exports('echarts',echarts)});

 

 

 1.2、在文件最上面添加上一下代码，注意添加的位置

window.layui && layui.define ? layui.define(function (exports) { exports('echarts', factory(exports)) }) :

 

2、升级后如何使用中国省份地图

     2.1下载 china.js ,有需要的请自取：

     链接：https://pan.baidu.com/s/1Xr8lRNJzjvLlQECe8g0bHg
     提取码：5euq

     2.2、在页面添加引用

     

 

 

     

 function chinaMapChart(data) {

                var mydata = [

                    { name: '北京', value: '100' }, { name: '天津', value: randomData() },

                    { name: '上海', value: randomData() }, { name: '重庆', value: randomData() },

                    { name: '河北', value: randomData() }, { name: '河南', value: randomData() },

                    { name: '云南', value: randomData() }, { name: '辽宁', value: randomData() },

                    { name: '黑龙江', value: randomData() }, { name: '湖南', value: randomData() },

                    { name: '安徽', value: randomData() }, { name: '山东', value: randomData() },

                    { name: '新疆', value: randomData() }, { name: '江苏', value: randomData() },

                    { name: '浙江', value: randomData() }, { name: '江西', value: randomData() },

                    { name: '湖北', value: randomData() }, { name: '广西', value: randomData() },

                    { name: '甘肃', value: randomData() }, { name: '山西', value: randomData() },

                    { name: '内蒙古', value: randomData() }, { name: '陕西', value: randomData() },

                    { name: '吉林', value: randomData() }, { name: '福建', value: randomData() },

                    { name: '贵州', value: randomData() }, { name: '广东', value: randomData() },

                    { name: '青海', value: randomData() }, { name: '西藏', value: randomData() },

                    { name: '四川', value: randomData() }, { name: '宁夏', value: randomData() },

                    { name: '海南', value: randomData() }, { name: '台湾', value: randomData() },

                    { name: '香港', value: randomData() }, { name: '南海诸岛', value: randomData() },{ name: '澳门', value: randomData() }

                ];

                //var mydata = eval("(" + data + ")");

//1.初始化地图
                var dom1 = document.getElementById('chinamap');
                var myChart = echarts.init(dom1);
                //2.配置
                var option = {
                    title: {
                        text: "人数分布图",
                        show:false,
                        textStyle: {
                            fontSize: 28
                        },
                        left: 'center',
                        top: 10
                    },
                    //设置地图和数据
                    series: [{
                        type: 'map',
                        map: 'china',
                        data:mydata,
                        label: {
                            show: true
                        } //显示省名称
                    }],
                    dataRange: { orient: "horizontal", min: 0, max: 6e4, text: ["高", "低"], splitNumber: 0 },
                    tooltip: {  //鼠标悬浮提示
                        triggerOn: 'mousemove',
                        formatter: function (params) {
                                var value= isNaN( params.value)?0:params.value;
                                return `省份：${params.name} </br>人数：${value} </br>`;
                          
                        }
                    },
                    //分段显示各省数据的颜色
                    visualMap: [{
                        type: 'piecewise',
                        pieces: [
                            { gt: 10000 },
                            { gt: 5000, lte: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
                            { gt: 1000, lte: 5000 },
                            { gt: 500, lte: 1000 },
                            { gt: 100, lte: 500 },
                            { gt: 10, lte: 100 },
                            { gt: 0, lte: 10 }     // 不指定 min，表示 min 为无限大（-Infinity）。
                        ],
                        //各分段的颜色
                        inRange: {
                            color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a']
                        },
                        showLabel: {
                            show: true
                        }
                    }]
                }
                //3.生成地图
                myChart.setOption(option);        
            }