echarts的路径问题

ma_sk 发布于 2015/02/14 20:24
阅读 3K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

我想弄一个地图扩展的echarts例子,但是总是报错

我的html文件的路径是:F:\study\web\echarts-2.2.0\echarts-2.2.0\projects\test2.html

svg文件在:F:\study\web\echarts-2.2.0\echarts-2.2.0\projects\svg\football.svg

echarts文件夹的路径:svg文件在:F:\study\web\echarts-2.2.0\echarts-2.2.0\


代码如下:请问路径到底该怎么设置,模块化加载应该注意些什么?谢谢!

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="..\build\dist\echarts.js"></script>
    <script type="text/javascript" src="js\jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        // 路径配置
    require.config({
         paths: {
                    echarts: '../build/dist',
                    'echarts/src/util/mapData':'../src/util/mapData'
            }


    });
    require(
            [
                'echarts'
            ],
        DrawEChart
        );
function DrawEChart(ec) {    
    var chartContainer = document.getElementById("main");
    var myChart = ec.init(chartContainer);
    require('echarts/src/util/mapData/params').params.football = {
            getGeoJson: function (callback) {
            $.ajax({
                url: "svg/football.svg",
                dataType: 'xml',
                success: function(xml) {
                    callback(xml)
                }
            });
        }
    }
    var option = {
        backgroundColor:'#228b22',
        title : {
            text : '2014世界杯',
            subtext: '地图SVG扩展',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip : {
            trigger: 'item'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name: '2014世界杯',
                type: 'map',
                mapType: 'football', // 自定义扩展图表类型
                roam:true,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '草地', hoverable: false, itemStyle:{normal:{label:{show:false}}}}
                ],
                textFixed : {
                    '球门区1' : [0, -20],
                    '球门区2' : [0, -20],
                    '禁区1' : [10, 20],
                    '禁区2' : [-10, 20],
                    '禁区弧线1' : [0, -20],
                    '禁区弧线2' : [0, -20],
                    '中圈' : [0, -20],
                    '开球点' : [0, 20]
                },
                markPoint : {
                    symbol:'circle',
                    symbolSize : 20,
                    effect : {
                        show: true,
                        color: 'lime'
                    },
                    data : [
                        {name: '开球点', value: 100, geoCoord:[425.126, 296.913]}
                    ]
                },
                markLine : {
                    smooth:true,
                    effect : {
                        show: true,
                        scaleSize: 1,
                        period: 20,
                        color: '#fff',
                        shadowBlur: 5
                    },
                    itemStyle : {
                        normal: {
                            borderWidth:1,
                            color: 'gold',
                            lineStyle: {
                                type: 'solid'
                            }
                        }
                    },
                    data : [
                        [
                            {name:'1', geoCoord:[96.879, 186.983]}, 
                            {name:'2', geoCoord:[693.786, 297.939]}
                        ],
                        [
                            {name:'2', geoCoord:[753.373, 186.983]},
                            {name:'1', geoCoord:[156.467, 296.913]}
                        ]
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
}
                    
    </script>
</body>

加载中
0
l
laterfall

你好请问你的问题解决了吗

返回顶部
顶部