ECharts map学习心得（导入ECharts）

最新推荐文章于 2024-06-15 13:07:44 发布

爱清清

最新推荐文章于 2024-06-15 13:07:44 发布

阅读量1.4w

点赞数 2

分类专栏： JS 文章标签： ECharts map echartsmap

本文链接：https://blog.csdn.net/ErErFei/article/details/40581433

版权

基本导入步骤如下：

源码下载地址：http://pan.baidu.com/s/1gdXZw91 密码：a59n

<代码中标出了导入的基本步骤>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>


<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    <!--Step:3 conifg ECharts's path, link to echarts.js from current page.-->
    <!--Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径 -->
    require.config({
        paths:{ 
            echarts:'./js/echarts-map',
            'echarts/chart/bar' : './js/echarts-map',
            'echarts/chart/line': './js/echarts-map',
            'echarts/chart/map' : './js/echarts-map'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myC