echarts报错: Uncaught TypeError: i.getOtherAxis is not a function

发布于 2022-01-05 13:20:10 字数 32293 浏览 752 评论 9

<!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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

半世蒼涼 2022-01-07 20:03:40

你们是不是也用了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){
                                    return param.value;
                                },
                                textStyle:{
                                    color:'#000',
                                    fontSize:10,
                                    baseline:'bottom'
                                }
                            }
                        }
                    },
                    data:convertData(data)
                },

 

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

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                coord:[geoCoord[0],geoCoord[1]],
                value: data[i].value
            });
        }
    }
    return res;
};

巡山小妖精 2022-01-07 20:03:38

怎么解决的?

绝影如岚 2022-01-07 20:03:34

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

伴我心暖 2022-01-07 20:02:01

也是这样的问题哦。

还没有发现原因。

辞别 2022-01-07 18:23:59

解决了,重新做了一遍

勿忘初心 2022-01-07 17:51:52

怎么解决的, 我发现我也遇到了这样的问题。

巡山小妖精 2022-01-07 17:15:23

解决了,重新做了一遍

南汐寒笙箫 2022-01-07 16:37:30

楼主解决了吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文