echart图表控件配置入门(一) - web369

web369

echart图表控件配置入门(一)

现在主流的web图表控件主要有hightchart、fusionchart、echart；
echart作为百度前端部门近期推出的一个基于html5的免费图表控件，以其丰富图表类型和良好的兼容性速度得到广大产品和开发人员的使用。作为一个开发人员，这里总结下echart的开发配置。


1、ECharts简介
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

 支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

Echarts官网：http://echarts.baidu.com/index.html

Echarts实例：http://echarts.baidu.com/doc/example.html

 

2、资源文件下载

 

可以在这里下载最新资源：https://github.com/ecomfe/echarts/archive/2.2.1.zip 下不了的话就去官网去下。

3、资源文件结构详解

3.1主目录结构介绍

重点：

doc 文件夹是demo示例，可以看看

build 是需要引入的开发资源包

index.html 是本地demo、文档说明的主入口 

 

3.2 build文件夹结构介绍

  

dist（文件夹） : 经过合并、压缩的单文件
　　echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
　　chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为每一个图表类型单独打包成独立文件，按需加载
　　　　echarts-line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
　　　　echarts-bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
　　　　echarts-scatter.js : 散点图
　　　　echarts-k.js : K线图
　　　　echarts-pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
　　　　echarts-radar.js : 雷达图
　　　　echarts-map.js : 地图
　　　　echarts-force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
　　　　echarts-chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
　　　　echarts-funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
　　　　echarts-gauge.js : 仪表盘
　　　　echarts-eventRiver.js : 事件河流图
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

4、开发模式一：所有图表类型一次载入方式

如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入
如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
//1、引用所有资源的主文件,全部加载了
<script src="build/source/echarts-all.js" type="text/javascript"></script>
//2、指图表对象
var myChart = echarts.init(document.getElementById(\'div1\'));
var option = {};
myChart.setOption(option);

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>echart示例 资源按需加载</title>   
    <script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
            }
        });
        require(
            [
                \'echarts\',
                \'echarts/chart/line\'   // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径        
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'div1\'));
                var ecConfig = require(\'echarts/config\');
                var option = {
                    title: {
                        text: \'标题\',
                        x: \'center\'
                    },
                    tooltip: {
                        trigger: \'axis\'
                    },
                    legend: {
                        data: [\'邮件营销\', \'联盟广告\', \'视频广告\', \'直接访问\', \'搜索引擎\'],
                        y: "bottom"
                    },
                    toolbox: {
                        show: true, //是否显示工具箱
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: [\'line\', \'bar\', \'stack\', \'tiled\'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //calculable: true,    容易搞错的属性，折线图、柱状图是否叠加
                    xAxis: [{
                        type: \'category\',
                        boundaryGap: false,
                        data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']
                    }],
                    yAxis: [{
                        type: \'value\'
                    }
                        ],
                    series: [
                        {
                            name: \'邮件营销\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: \'联盟广告\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: \'视频广告\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: \'直接访问\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: \'搜索引擎\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        );     
    </script>
</body>
</html>
View Code

5、开发模式二：模块化单文件引入（推荐）

就是通过引入加主加载器，然后按需加载所需的图表类型，优点较上一种方式加载速度更快
通过引用build/dist/echart.js文件，这是包含AMD加载器的echarts主文件，只需要引入文件，然后按需加载指定类型图表文件

//1、引用主文件
<script src="build/source/echarts.js" type="text/javascript"></script>
//2、配置资源文件夹路径
require.config({
　　paths: {
　　echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
　　}
});
//3、加载所需的图表类型文件
require(
　　[
　　　　\'echarts\',
　　　　\'echarts/chart/line\' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
　　],
　　function (ec) {}
}

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>echart示例 资源按需加载</title>   
    <script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
            }
        });
        require(
            [
                \'echarts\',
                \'echarts/chart/line\'   // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径        
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'div1\'));
                var ecConfig = require(\'echarts/config\');
                var option = {
                    title: {
                        text: \'标题\',
                        x: \'center\'
                    },
                    tooltip: {
                        trigger: \'axis\'
                    },
                    legend: {
                        data: [\'邮件营销\', \'联盟广告\', \'视频广告\', \'直接访问\', \'搜索引擎\'],
                        y: "bottom"
                    },
                    toolbox: {
                        show: true, //是否显示工具箱
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: [\'line\', \'bar\', \'stack\', \'tiled\'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //calculable: true,    容易搞错的属性，折线图、柱状图是否叠加
                    xAxis: [{
                        type: \'category\',
                        boundaryGap: false,
                        data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']
                    }],
                    yAxis: [{
                        type: \'value\'
                    }
                        ],
                    series: [
                        {
                            name: \'邮件营销\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: \'联盟广告\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: \'视频广告\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: \'直接访问\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: \'搜索引擎\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        );     
    </script>
</body>
</html>
View Code

 

6、常用的图表类型

6.1柱状图

 

柱状图代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>echart示例 柱状图</title>   
    <script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a> 
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>

<script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
            }
        });
        require(
            [
                \'echarts\',          
                \'echarts/chart/bar\', 
                \'echarts/chart/line\'   // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径                    
                //\'echarts/chart/bar\'     //柱形图
                //\'echarts/chart/line\'    //折线图
                //\'echarts/chart/pie\'     //饼图  （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
                //\'echarts/chart/chord\'   //和弦图
                //\'echarts/chart/map\'     //地图
                //\'echarts/chart/radar\'   //雷达
                //★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
  
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'div1\'));
                var ecConfig = require(\'echarts/config\');
                var option = {
                    title: {
                        text: \'某地区蒸发量和降水量\',
                        subtext: \'纯属虚构\'
                    },
                    tooltip: {
                        trigger: \'axis\'
                    },
                    legend: {
                        data: [\'蒸发量\', \'降水量\']
                    },
                    toolbox: {//是否显示工具箱
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: [\'line\', \'bar\'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //calculable: true, 容易搞错的属性，折线图、柱状图是否叠加
                    xAxis: [{
                                type: \'category\',
                                data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\']
                    }],
                    yAxis: [{
                            type: \'value\'
                    }],
                    series: [
                        {
                            name: \'蒸发量\',
                            type: \'bar\',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        },
                        {
                            name: \'降水量\',
                            type: \'bar\',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        ); 

    
    </script>


</body>
</html>
View Code

 

6.2折线图

折线图代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>echart示例 折线图</title>   
    <script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>

<a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a> 
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
            }
        });
        require(
            [
                \'echarts\',
                \'echarts/chart/line\'   // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径                    
                //\'echarts/chart/bar\'     //柱形图
                //\'echarts/chart/line\'    //折线图
                //\'echarts/chart/pie\'     //饼图  （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
                //\'echarts/chart/chord\'   //和弦图
                //\'echarts/chart/map\'     //地图
                //\'echarts/chart/radar\'   //雷达
                //★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引       
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'div1\'));
                var ecConfig = require(\'echarts/config\');
                var option = {
                    title: {
                        text: \'标题\',
                        x: \'center\'
                    },
                    tooltip: {
                        trigger: \'axis\'
                    },
                    legend: {
                        data: [\'邮件营销\'],
                        y: "bottom"
                    },
                    toolbox: {
                        show: true, //是否显示工具箱
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: [\'line\', \'bar\', \'stack\', \'tiled\'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //calculable: true,    容易搞错的属性，折线图、柱状图是否叠加
                    xAxis: [{
                        type: \'category\',
                        boundaryGap: false,
                        data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']
                    }],
                    yAxis: [{
                        type: \'value\'
                    }
                        ],
                    series: [
                        {
                            name: \'邮件营销\',
                            type: \'line\',
                            stack: \'总量\',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        ); 

    
    </script>


</body>
</html>
View Code

 

6.3饼状图

 

饼状图代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>echart示例 饼图</title>   
    <script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a> 

<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
            }
        });
        require(
            [
                \'echarts\',
                \'echarts/chart/funnel\',
                \'echarts/chart/pie\'   // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径                    
                //\'echarts/chart/bar\'     //柱形图
                //\'echarts/chart/line\'    //折线图
                //\'echarts/chart/pie\'     //饼图  （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
                //\'echarts/chart/chord\'   //和弦图
                //\'echarts/chart/map\'     //地图
                //\'echarts/chart/radar\'   //雷达
                //\'echarts/chart/funnel\'  //漏斗
                
                //★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'div1\'));
                var ecConfig = require(\'echarts/config\');
                var option = {
                    title: {
                        text: \'某站点用户访问来源\',
                        subtext: \'纯属虚构\',
                        x: \'center\'
                    },
                    tooltip: {
                        trigger: \'item\',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: \'vertical\',
                        x: \'left\',
                        data: [\'直接访问\', \'邮件营销\', \'联盟广告\', \'视频广告\', \'搜索引擎\']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: [\'pie\', \'funnel\'],
                                option: {
                                    funnel: {
                                        x: \'25%\',
                                        width: \'50%\',
                                        funnelAlign: \'left\',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //calculable: true,
                    series: [
                        {
                            name: \'访问来源\',
                            type: \'pie\',
                            radius: \'55%\',
                            center: [\'50%\', \'60%\'],
                            data: [
                                { value: 335, name: \'直接访问\' },
                                { value: 310, name: \'邮件营销\' },
                                { value: 234, name: \'联盟广告\' },
                                { value: 135, name: \'视频广告\' },
                                { value: 1548, name: \'搜索引擎\' }
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        ); 

    
    </script>


</body>
</html>
View Code

 

6.4中国地图

 

地图代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>echart示例 中国地图</title>   
    <script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>

<a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a> 
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">

        require.config({
            paths: {
                echarts: \'./build/dist\' //引用资源文件夹路径，注意路径
            }
        });
        require(
            [
                \'echarts\',
                \'echarts/chart/map\'   // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径                    
                //\'echarts/chart/bar\'     //柱形图
                //\'echarts/chart/line\'    //折线图
                //\'echarts/chart/pie\'     //饼图  （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
                //\'echarts/chart/chord\'   //和弦图
                //\'echarts/chart/map\'     //地图
                //\'echarts/chart/radar\'   //雷达
                //★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引     
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'div1\'));
                var ecConfig = require(\'echarts/config\');
                var option = {
                    title: {
                        text: \'iphone销量\',
                        subtext: \'纯属虚构\',
                        x: \'center\'
                    },
                    tooltip: {
                        trigger: \'item\'
                    },
                    legend: {
                        orient: \'vertical\',
                        x: \'left\',
                        data: [\'iphone3\', \'iphone4\', \'iphone5\']
                    },
                    dataRange: {
                        min: 0,
                        max: 2500,
                        x: \'left\',
                        y: \'bottom\',
                        text: [\'高\', \'低\'],           // 文本，默认为数值文本
                        calculable: true
                    },
                    toolbox: {
                        show: true,
                        orient: \'vertical\',
                        x: \'right\',
                        y: \'center\',
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    roamController: {
                        show: true,
                        x: \'right\',
                        mapTypeControl: {
                            \'china\': true
                        }
                    },
                    series: [
                    {
                        name: \'iphone3\',
                        type: \'map\',
                        mapType: \'china\',
                        roam: false,
                        itemStyle: {
                            normal: { label: { show: true} },
                            emphasis: { label: { show: true} }
                        },
                        data: [
                            { name: \'北京\', value: Math.round(Math.random() * 1000) },
                            { name: \'天津\', value: Math.round(Math.random() * 1000) },
                            { name: \'上海\', value: Math.round(Math.random() * 1000) },
                            { name: \'重庆\', value: Math.round(Math.random() * 1000) },
                            { name: \'河北\', value: Math.round(Math.random() * 1000) },
                            { name: \'河南\', value: Math.round(Math.random() * 1000) },
                            { name: \'云南\', value: Math.round(Math.random() * 1000) },
                            { name: \'辽宁\', value: Math.round(Math.random() * 1000) },
                            { name: \'黑龙江\', value: Math.round(Math.random() * 1000) },
                            { name: \'湖南\', value: Math.round(Math.random() * 1000) },
                            { name: \'安徽\', value: Math.round(Math.random() * 1000) },
                            { name: \'山东\', value: Math.round(Math.random() * 1000) },
                            { name: \'新疆\', value: Math.round(Math.random() * 1000) },
                            { name: \'江苏\', value: Math.round(Math.random() * 1000) },
                            { name: \'浙江\', value: Math.round(Math.random() * 1000) },
                            { name: \'江西\', value: Math.round(Math.random() * 1000) },
                            { name: \'湖北\', value: Math.round(Math.random() * 1000) },
                            { name: \'广西\', value: Math.round(Math.random() * 1000) },
                            { name: \'甘肃\', value: Math.round(Math.random() * 1000) },
                            { name: \'山西\', value: Math.round(Math.random() * 1000) },
                            { name: \'内蒙古\', value: Math.round(Math.random() * 1000) },
                            { name: \'陕西\', value: Math.round(Math.random() * 1000) },
                            { name: \'吉林\', value: Math.round(Math.random() * 1000) },
                            { name: \'福建\', value: Math.round(Math.random() * 1000) },
                            { name: \'贵州\', value: Math.round(Math.random() * 1000) },
                            { name: \'广东\', value: Math.round(Math.random() * 1000) },
                            { name: \'青海\', value: Math.round(Math.random() * 1000) },
                            { name: \'西藏\', value: Math.round(Math.random() * 1000) },
                            { name: \'四川\', value: Math.round(Math.random() * 1000) },
                            { name: \'宁夏\', value: Math.round(Math.random() * 1000) },
                            { name: \'海南\', value: Math.round(Math.random() * 1000) },
                            { name: \'台湾\', value: Math.round(Math.random() * 1000) },
                            { name: \'香港\', value: Math.round(Math.random() * 1000) },
                            { name: \'澳门\', value: Math.round(Math.random() * 1000) }
                        ]
                    },
                    {
                        name: \'iphone4\',
                        type: \'map\',
                        mapType: \'china\',
                        itemStyle: {
                            normal: { label: { show: true} },
                            emphasis: { label: { show: true} }
                        },
                        data: [
                            { name: \'北京\', value: Math.round(Math.random() * 1000) },
                            { name: \'天津\', value: Math.round(Math.random() * 1000) },
                            { name: \'上海\', value: Math.round(Math.random() * 1000) },
                            { name: \'重庆\', value: Math.round(Math.random() * 1000) },
                            { name: \'河北\', value: Math.round(Math.random() * 1000) },
                            { name: \'安徽\', value: Math.round(Math.random() * 1000) },
                            { name: \'新疆\', value: Math.round(Math.random() * 1000) },
                            { name: \'浙江\', value: Math.round(Math.random() * 1000) },
                            { name: \'江西\', value: Math.round(Math.random() * 1000) },
                            { name: \'山西\', value: Math.round(Math.random() * 1000) },
                            { name: \'内蒙古\', value: Math.round(Math.random() * 1000) },
                            { name: \'吉林\', value: Math.round(Math.random() * 1000) },
                            { name: \'福建\', value: Math.round(Math.random() * 1000) },
                            { name: \'广东\', value: Math.round(Math.random() * 1000) },
                            { name: \'西藏\', value: Math.round(Math.random() * 1000) },
                            { name: \'四川\', value: Math.round(Math.random() * 1000) },
                            { name: \'宁夏\', value: Math.round(Math.random() * 1000) },
                            { name: \'香港\', value: Math.round(Math.random() * 1000) },
                            { name: \'澳门\', value: Math.round(Math.random() * 1000) }
                        ]
                    },
                    {
                        name: \'iphone5\',
                        type: \'map\',
                        mapType: \'china\',
                        itemStyle: {
                            normal: { label: { show: true} },
                            emphasis: { label: { show: true} }
                        },
                        data: [
                            { name: \'北京\', value: Math.round(Math.random() * 1000) },
                            { name: \'天津\', value: Math.round(Math.random() * 1000) },
                            { name: \'上海\', value: Math.round(Math.random() * 1000) },
                            { name: \'广东\', value: Math.round(Math.random() * 1000) },
                            { name: \'台湾\', value: Math.round(Math.random() * 1000) },
                            { name: \'香港\', value: Math.round(Math.random() * 1000) },
                            { name: \'澳门\', value: Math.round(Math.random() * 1000) }
                        ]
                    }
                ]
                };
                myChart.setOption(option);
            }
        ); 

    
    </script>


</body>
</html>
View Code

 

 如果需要完成代码，站内找我，发你邮箱；

以上demo的目录结构，资源引用一定要注意路径问题

 

下一节介绍如何通过后台数据请求，生成图表数据。《echart图表控件配置入门(二)常用图表数据动态绑定》

下下节介绍中国地图省市切换和数据请求

分类：

技术点：

相关文章：

  • 2021-08-19
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-20
  • 2021-08-08
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-11-25
  • 2021-06-02
  • 2022-03-04
  • 2021-11-21
  • 2022-01-01
  • 2021-11-20
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode