开发者社区> 问答> 正文

echarts报错: Uncaught TypeError: i.getOthe?报错

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DGnY1nQZcu2e4nytZcpGYRXgWUV5Xqxp"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>  
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
      <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
       
    option = {
        bmap: {
            center: [118.1017000000, 36.0737400000],
            zoom: 8,
            roam: true,
            mapStyle: {
                styleJson: [{
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                        "color": "#044161"
                    }
                }, {
                    "featureType": "land",
                    "elementType": "all",
                    "stylers": {
                        "color": "#004981"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#064f85"
                    }
                }, {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#004981"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#005b96",
                        "lightness": 1
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#004981"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#00508b"
                    }
                }, {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "green",
                    "elementType": "all",
                    "stylers": {
                        "color": "#056197",
                        "visibility": "off"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "manmade",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#029fd4"
                    }
                }, {
                    "featureType": "building",
                    "elementType": "all",
                    "stylers": {
                        "color": "#1a5787"
                    }
                }, {
                    "featureType": "label",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }]
            }
        },
        color: ['gold', 'aqua', 'lime'],
                title: {
                    text: '山东省高速出行情况',
                    x: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(v) {
                        return v[1].replace(':', ' > ');
                    }
                },
         
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
         series: [{
                        name: '开始站之华山收费站',
                        type: 'map',
                        mapType: 'none',
                        center: [117.04042, 36.73925],
                        data: [],
                        geoCoord: {
                            '峡山收费站': [119.47122, 36.63167],
                            '田庄收费站': [119.75134, 36.7775]
                        },


                        markLine: {
                            smooth: true,
                            effect: {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            data: [
                                [{ name: '华山收费站' }, { name: '临沂收费站', value: 2 }],
                                [{ name: '华山收费站' }, { name: '兖州收费站', value: 148 }],
                                [{ name: '华山收费站' }, { name: '章丘收费站', value: 86 }]


                            ]
                        },
                        markPoint: {
                            symbol: 'Circle',
                            symbolSize: 10,
                            effect: {
                                show: true,
                                shadowBlur: 0
                            },
                            itemStyle: {
                                normal: {
                                    label: { show: false }
                                }
                            },
                            data: [
                                { name: '兖州收费站', value: 148 },
                                { name: '章丘收费站', value: 86 }
                            ]
                        }
                    }, {
                        name: '结束站之黄岛收费站',
                        type: 'map',
                        mapType: 'none',
                        data: [],
                        markLine: {
                            smooth: true,
                            effect: {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            data: [
                                [{ name: '淄博新区收费站' }, { name: '黄岛收费站', value: 1 }],
                                [{ name: '邹城收费站' }, { name: '黄岛收费站', value: 1 }]
                            ]
                        },
                        markPoint: {
                            symbol: 'Circle',
                            symbolSize: 10,
                            effect: {
                                show: true,
                                shadowBlur: 0
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            data: [
                                { name: '淄博新区收费站', value: 1 },
                                { name: '邹城收费站', value: 1 }
                            ]
                        }


                    }, {
                        name: '开始站之青岛东收费站',
                        type: 'map',
                        mapType: 'none',
                        data: [],
                        markLine: {
                            smooth: true,
                            effect: {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            data: [
                                [{ name: '青岛东收费站' }, { name: '惜福收费站', value: 51 }],
                                [{ name: '青岛东收费站' }, { name: '济南北收费站', value: 1 }]
                            ]
                        },
                        markPoint: {
                            symbol: 'Circle',
                            symbolSize: 10,
                            effect: {
                                show: true,
                                shadowBlur: 0
                            },
                            itemStyle: {
                                normal: {
                                    label: { show: false }
                                }
                            },
                            data: [
                                { name: '惜福收费站', value: 51 },
                                { name: '济南北收费站', value: 1 }
                            ]
                        }
                    }






                ],
 




        };




        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

展开
收起
爱吃鱼的程序员 2020-06-08 21:13:23 520 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    楼主解决了吗?解决了,重新做了一遍怎么解决的,我发现我也遇到了这样的问题。解决了,重新做了一遍

    楼主解决了吗,我也遇到了相同的问题

    <spanstyle="color:#000080;font-weight:bold;">var<spanstyle="color:#660e7a;font-weight:bold;font-style:italic;">mapOption={<spanstyle="color:#660e7a;font-weight:bold;">title:{<spanstyle="color:#660e7a;font-weight:bold;">text:<spanstyle="color:#008000;font-weight:bold;">'',<spanstyle="color:#660e7a;font-weight:bold;">subtext:<spanstyle="color:#008000;font-weight:bold;">'',<spanstyle="color:#660e7a;font-weight:bold;">left:<spanstyle="color:#008000;font-weight:bold;">'center'<spanstyle="color:#008000;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">tooltip:{<spanstyle="color:#660e7a;font-weight:bold;">trigger:<spanstyle="color:#008000;font-weight:bold;">'item'<spanstyle="color:#008000;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">legend:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false<spanstyle="color:#000080;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">visualMap:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false<spanstyle="color:#000080;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">toolbox:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false<spanstyle="color:#000080;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">series:[{<spanstyle="color:#660e7a;font-weight:bold;">name:<spanstyle="color:#008000;font-weight:bold;">'<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">车享家<spanstyle="color:#008000;font-weight:bold;">',<spanstyle="color:#660e7a;font-weight:bold;">type:<spanstyle="color:#008000;font-weight:bold;">'map',<spanstyle="color:#660e7a;font-weight:bold;">map:<spanstyle="color:#008000;font-weight:bold;">'china',<spanstyle="color:#660e7a;font-weight:bold;">roam:<spanstyle="color:#000080;font-weight:bold;">false,<spanstyle="color:#660e7a;font-weight:bold;">itemStyle:{<spanstyle="color:#660e7a;font-weight:bold;">normal:{<spanstyle="color:#660e7a;font-weight:bold;">borderColor:<spanstyle="color:#008000;font-weight:bold;">'rgba(255,255,255,0.8)',<spanstyle="color:#660e7a;font-weight:bold;">areaColor:<spanstyle="color:#008000;font-weight:bold;">'rgba(255,255,255,0.4)',},<spanstyle="color:#660e7a;font-weight:bold;">emphasis:{<spanstyle="color:#660e7a;font-weight:bold;">areaColor:<spanstyle="color:#008000;font-weight:bold;">'rgba(255,255,255,0.8)',}},<spanstyle="color:#660e7a;font-weight:bold;">markPoint:{<spanstyle="color:#660e7a;font-weight:bold;">symbol:<spanstyle="color:#008000;font-weight:bold;">'circle',<spanstyle="color:#7a7a43;">symbolSize:<spanstyle="color:#000080;font-weight:bold;">function(val){<spanstyle="color:#000080;font-weight:bold;">returnval+val/<spanstyle="color:#0000ff;">100;},<spanstyle="color:#660e7a;font-weight:bold;">label:{<spanstyle="color:#660e7a;font-weight:bold;">normal:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false,<spanstyle="color:#660e7a;font-weight:bold;">position:<spanstyle="color:#008000;font-weight:bold;">'right',<spanstyle="color:#660e7a;font-weight:bold;">formatter:<spanstyle="color:#008000;font-weight:bold;">'{b}'<spanstyle="color:#008000;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">emphasis:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false,}},<spanstyle="color:#660e7a;font-weight:bold;">itemStyle:{<spanstyle="color:#660e7a;font-weight:bold;">normal:{<spanstyle="color:#660e7a;font-weight:bold;">color:<spanstyle="color:#008000;font-weight:bold;">'#fff',<spanstyle="color:#660e7a;font-weight:bold;">borderColor:<spanstyle="color:#008000;font-weight:bold;">'#fff',}},<spanstyle="color:#660e7a;font-weight:bold;">data:[]},<spanstyle="color:#660e7a;font-weight:bold;">geoCoord:{<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">西藏省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">91.11,<spanstyle="color:#0000ff;">29.97],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">上海市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">121.48,<spanstyle="color:#0000ff;">31.22],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">福建省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">119.3,<spanstyle="color:#0000ff;">26.08],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">广东省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">113.23,<spanstyle="color:#0000ff;">23.16],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">山西省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">112.53,<spanstyle="color:#0000ff;">37.87],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">云南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">102.73,<spanstyle="color:#0000ff;">25.04],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">深圳市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">114.07,<spanstyle="color:#0000ff;">22.62],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">辽宁省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">123.38,<spanstyle="color:#0000ff;">41.8],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">吉林省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">125.35,<spanstyle="color:#0000ff;">43.88],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">江西省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">115.89,<spanstyle="color:#0000ff;">28.68],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">海南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">109.511909,<spanstyle="color:#0000ff;">18.252847],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">青海省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">101.74,<spanstyle="color:#0000ff;">36.56],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">内蒙古省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">111.65,<spanstyle="color:#0000ff;">40.82],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">四川省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">104.06,<spanstyle="color:#0000ff;">30.67],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">陕西省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">108.95,<spanstyle="color:#0000ff;">34.27],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">重庆市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">106.54,<spanstyle="color:#0000ff;">29.59],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">江苏省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">118.78,<spanstyle="color:#0000ff;">32.04],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">北京市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">116.46,<spanstyle="color:#0000ff;">39.92],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">新疆<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">87.68,<spanstyle="color:#0000ff;">43.77],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">浙江省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">120.19,<spanstyle="color:#0000ff;">30.26],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">山东省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">117,<spanstyle="color:#0000ff;">36.65],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">天津<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">117.2,<spanstyle="color:#0000ff;">39.13],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">河南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">113.65,<spanstyle="color:#0000ff;">34.76],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">黑龙江省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">126.63,<spanstyle="color:#0000ff;">45.75],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">河北省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">114.48,<spanstyle="color:#0000ff;">38.03],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">湖南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">113,<spanstyle="color:#0000ff;">28.21],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">湖北省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">114.31,<spanstyle="color:#0000ff;">30.52]}}]};

    <imgheight="634"src="https://static.oschina.net/uploads/space/2017/0401/153247_qsTC_2965162.png"width="766">

    也是这样的问题哦。

    还没有发现原因。

    ..

    求删帖,又没解决问题分分享,还占搜索

    烦人,不说怎么解决的

    怎么解决的?

    你们是不是也用了markPoint属性?

    可能是漏掉了marker需要对应的坐标系

    可能是漏掉了marker需要对应的坐标系

    可能是漏掉了marker需要对应的坐标系

    我先说下我自己的情况:用的echarts3.8.4,并且用的是原先官网可以下载的《城市1.js》的地图文件+《城市2.json》的GeoJSON文件拼接而成的《城市2.js》文件用作series=>"type"="map";的例子 

    因为我是具体实现的地图区块上每个feature都有一个对应的label展示,需要依赖marker做成效果(肯定有其他更好的办法,但是此时比较赶时间,所以未深究!),所以我的marker需要经纬度作为地理坐标系,所以是这样的

         markPoint:{
                   symbolSize:8,
                   itemStyle:{
                      normal:{
                         color:'transparent',
                         label:{
                            formatter:function(param){
                               returnparam.value;
                            },
                            textStyle:{
                               color:'#000',
                               fontSize:10,
                               baseline:'bottom'
                            }
                         }
                      }
                   },
                   data:convertData(data)
                },

     

    忽略不重要的属性,重点是convertData()方法

    varconvertData=function(data){
       varres=[];
       for(vari=0;i<data.length;i++){
          vargeoCoord=geoCoordMap[data[i].name];
          if(geoCoord){
             res.push({
                name:data[i].name,
                coord:[geoCoord[0],geoCoord[1]],
                value:data[i].value
             });
          }
       }
       returnres;
    };

    2020-06-09 15:45:47
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载