JavaScript

echarts中地图和统计图的简单使用

Nick · 4月29日 · 2020年 · 本文10448字 · 阅读27分钟43,724

中国地图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

 <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

3. 样例代码如下

<!DOCTYPE html>
<html lang="en" style="height:100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <style>
        * {
            margin: 0;
        }
    </style>
</head>

<body style="height:100%;width:100%;">
    <div id="main" style="width:100%;height:100%;"></div>
    <script>
        function randomValue() {
            return Math.round(Math.random() * 2000);
        }
        option = {
            backgroundColor: 'block',
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                    var res = params.name + '<br />';
                    //定义一个变量来保存series数据系列
                    var myseries = option.series;
                    //循环遍历series数据系列
                    for (var i = 0; i < myseries.length; i++) {
                        //在内部继续循环series[i],从data中判断:当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
                        for (var k = 0; k < myseries[i].data.length; k++) {
                            //console.log(myseries[i].data[k].name);
                            //如果data数据中的name和地区名称一样
                            if (myseries[i].data[k].name == params.name) {
                                //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                                res += myseries[i].name + ':' + myseries[i].data[k]
                                    .value + '<br />';
                            }
                        }
                    }
                    return res;
                }
            },
            visualMap: {
                min: 0,
                max: 2000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#e0ffff', 'red']
                }
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },

            series: [{
                    name: '浏览量',
                    type: 'map',
                    roam: false,
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    // tooltip: {show: false},
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F06C00'
                        }
                    },
                    data: [{
                            name: '北京',
                            value: randomValue()
                        },
                        {
                            name: '天津',
                            value: randomValue()
                        },
                        {
                            name: '上海',
                            value: randomValue()
                        },
                        {
                            name: '重庆',
                            value: randomValue()
                        },
                        {
                            name: '河北',
                            value: randomValue()
                        },
                        {
                            name: '河南',
                            value: randomValue()
                        },
                        {
                            name: '云南',
                            value: randomValue()
                        },
                        {
                            name: '辽宁',
                            value: randomValue()
                        },
                        {
                            name: '黑龙江',
                            value: randomValue()
                        },
                        {
                            name: '湖南',
                            value: randomValue()
                        },
                        {
                            name: '安徽',
                            value: randomValue()
                        },
                        {
                            name: '山东',
                            value: randomValue()
                        },
                        {
                            name: '新疆',
                            value: randomValue()
                        },
                        {
                            name: '江苏',
                            value: randomValue()
                        },
                        {
                            name: '浙江',
                            value: randomValue()
                        },
                        {
                            name: '江西',
                            value: randomValue()
                        },
                        {
                            name: '湖北',
                            value: randomValue()
                        },
                        {
                            name: '广西',
                            value: randomValue()
                        },
                        {
                            name: '甘肃',
                            value: randomValue()
                        },
                        {
                            name: '山西',
                            value: randomValue()
                        },
                        {
                            name: '内蒙古',
                            value: randomValue()
                        },
                        {
                            name: '陕西',
                            value: randomValue()
                        },
                        {
                            name: '吉林',
                            value: randomValue()
                        },
                        {
                            name: '福建',
                            value: randomValue()
                        },
                        {
                            name: '贵州',
                            value: randomValue()
                        },
                        {
                            name: '广东',
                            value: randomValue()
                        },
                        {
                            name: '青海',
                            value: randomValue()
                        },
                        {
                            name: '西藏',
                            value: randomValue()
                        },
                        {
                            name: '四川',
                            value: randomValue()
                        },
                        {
                            name: '宁夏',
                            value: randomValue()
                        },
                        {
                            name: '海南',
                            value: randomValue()
                        },
                        {
                            name: '台湾',
                            value: randomValue()
                        },
                        {
                            name: '香港',
                            value: randomValue()
                        },
                        {
                            name: '澳门',
                            value: randomValue()
                        }
                    ]
                },
                {
                    name: '访问量',
                    type: 'map',
                    roam: false,
                    coordinateSystem: 'geo',
                    // geoIndex: 0,
                    // tooltip: {show: false},
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F06C00'
                        }
                    },
                    data: [{
                            name: '北京',
                            value: randomValue()
                        },
                        {
                            name: '天津',
                            value: randomValue()
                        },
                        {
                            name: '上海',
                            value: randomValue()
                        },
                        {
                            name: '重庆',
                            value: randomValue()
                        },
                        {
                            name: '河北',
                            value: randomValue()
                        },
                        {
                            name: '河南',
                            value: randomValue()
                        },
                        {
                            name: '云南',
                            value: randomValue()
                        },
                        {
                            name: '辽宁',
                            value: randomValue()
                        },
                        {
                            name: '黑龙江',
                            value: randomValue()
                        },
                        {
                            name: '湖南',
                            value: randomValue()
                        },
                        {
                            name: '安徽',
                            value: randomValue()
                        },
                        {
                            name: '山东',
                            value: randomValue()
                        },
                        {
                            name: '新疆',
                            value: randomValue()
                        },
                        {
                            name: '江苏',
                            value: randomValue()
                        },
                        {
                            name: '浙江',
                            value: randomValue()
                        },
                        {
                            name: '江西',
                            value: randomValue()
                        },
                        {
                            name: '湖北',
                            value: randomValue()
                        },
                        {
                            name: '广西',
                            value: randomValue()
                        },
                        {
                            name: '甘肃',
                            value: randomValue()
                        },
                        {
                            name: '山西',
                            value: randomValue()
                        },
                        {
                            name: '内蒙古',
                            value: randomValue()
                        },
                        {
                            name: '陕西',
                            value: randomValue()
                        },
                        {
                            name: '吉林',
                            value: randomValue()
                        },
                        {
                            name: '福建',
                            value: randomValue()
                        },
                        {
                            name: '贵州',
                            value: randomValue()
                        },
                        {
                            name: '广东',
                            value: randomValue()
                        },
                        {
                            name: '青海',
                            value: randomValue()
                        },
                        {
                            name: '西藏',
                            value: randomValue()
                        },
                        {
                            name: '四川',
                            value: randomValue()
                        },
                        {
                            name: '宁夏',
                            value: randomValue()
                        },
                        {
                            name: '海南',
                            value: randomValue()
                        },
                        {
                            name: '台湾',
                            value: randomValue()
                        },
                        {
                            name: '香港',
                            value: randomValue()
                        },
                        {
                            name: '澳门',
                            value: randomValue()
                        }
                    ]
                }
            ]
        };

        var chart = echarts.init(document.getElementById("main"))
        chart.setOption(option);
    </script>
</body>

</html>

省份地图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

3. 需要请求获取省份的数据(json文件)

各个省份地图json下载地址:
https://github.com/apache/incubator-echarts/tree/master/map
或者点击这里
链接:https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA
提取码:b397

4. 样例代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body style="background-color: black;">
    <div id="main" style="width: 605px;height: 550px;margin: 80px auto;"></div>
    <script>
        $(function () {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();
            $.get('./省份数据/json(省份)/jiangxi.json', function (geoJson) {
                myChart.hideLoading();
                echarts.registerMap('云南', geoJson);

                myChart.setOption(option = {
                    backgroundColor: 'black',
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                            var res = params.name + '<br />';
                            //定义一个变量来保存series数据系列
                            var myseries = option.series;
                            //循环遍历series数据系列
                            for (var i = 0; i < myseries.length; i++) {
                                //在内部继续循环series[i],从data中判断:当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
                                for (var k = 0; k < myseries[i].data.length; k++) {
                                    //console.log(myseries[i].data[k].name);
                                    //如果data数据中的name和地区名称一样
                                    if (myseries[i].data[k].name == params.name) {
                                        //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                                        res += myseries[i].name + ':' + myseries[i].data[k]
                                            .value + '<br />';
                                    }
                                }
                            }
                            return res;
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 2000,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#e0ffff', 'red']
                        }
                    },
                    geo: {
                        map: '云南',
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                color: 'rgba(0,0,0,0.4)'
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.7)'
                            },
                            emphasis: {
                                areaColor: null,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        "left": 50,
                        "right": 0,
                        "top": 0,
                        "bottom": 0
                    },

                    series: [{
                            name: '治愈病例',
                            type: 'map',
                            roam: false,
                            coordinateSystem: 'geo',
                            // geoIndex: 0,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F06C00'
                                }
                            },
                            data: [{
                                    name: '赣州市',
                                    value: 222
                                },
                                {
                                    name: '新余市',
                                    value: 333
                                },
                                {
                                    name: '抚州市',
                                    value: 432
                                },
                                {
                                    name: '吉安市',
                                    value: 1234
                                },
                                {
                                    name: '上饶市',
                                    value: 324
                                }
                            ]
                        },
                        {
                            name: '确诊病例',
                            type: 'map',
                            roam: false,
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            // tooltip: {show: false},
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F06C00'
                                }
                            },
                            data: [{
                                    name: '赣州市',
                                    value: 888
                                },
                                {
                                    name: '新余市',
                                    value: 677
                                },
                                {
                                    name: '抚州市',
                                    value: 1322
                                },
                                {
                                    name: '吉安市',
                                    value: 1234
                                },
                                {
                                    name: '上饶市',
                                    value: 4321
                                }
                            ]
                        }
                    ]
                });
            });
        })
    </script>
</body>

</html>

注意:请求json文件必须使用服务器运行
在这里插入图片描述

条形、折线统计图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

3. 样例代码如下

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>第三部分</title>
</head>

<body>
    <div id="main" style="height:600px;width: 1100px;margin-left: 30px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script type="text/javascript">
        $(function (ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));

            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                toolbox: {
                    show: true,
                    // color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
                    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,
                dataZoom: {
                    show: true,
                    realtime: true,

                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: '邮件营销',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        // stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };



            // 为echarts对象加载数据 
            myChart.setOption(option);
        });
    </script>
</body>

饼图

1. 效果如下

在这里插入图片描述

2. 需要引入的文件

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

3. 样例代码如下

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '2018年TOP 25电影来源地区的分布情况',
                subtext: '数据真实',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                right: "right",
                data: ['中国大陆', '中国香港', '中国台湾', '美国', '印度'],
                textStyle: {
                    fontSize: '14'
                }
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '70%',

                data: [{
                        value: 14,
                        name: '中国大陆'
                    },
                    {
                        value: 5,
                        name: '中国香港'
                    },
                    {
                        value: 2,
                        name: '中国台湾'
                    },
                    {
                        value: 11,
                        name: '美国'
                    },
                    {
                        value: 1,
                        name: '印度'
                    }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            fontSize: '20'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                }
            }]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>

总结

  1. 使用echarts一般可以自己网上找案例,或者去官网查看文档
  2. 如果使用的echarts是动态获取到,用到ajax不能使用异步的方式,不然渲染的时候拿不到数据,应该选择使用同步的方式(自己搞了半天,特别注意
 $.ajax({
                type: "get",
                url: "http://localhost:8080/area/chartData",
                data: "data",
                dataType: "json",
                async: false,//使用同步
                success: function (response) {
                    console.log(response);

                }

            })
0 条回应
在线人数:1人 来访统计
说谎
林宥嘉
隐藏