【Echarts】二维地图叠加柱状图

最新推荐文章于 2024-06-25 15:34:07 发布

程序员不丑009

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量1.1k

点赞数

分类专栏：前端知识文章标签： echarts地图

本文链接：https://blog.csdn.net/u013517229/article/details/118211380

版权

前端知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts 地图</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/3.8.0/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 800px;"></div>
<script type="text/javascript">
    var myChart;
        $.get("扬州市.json", function(huaianJson) {
            echarts.registerMap("yangzhou", huaianJson);
            myChart = echarts.init(document.getElementById("map"));
            var option = {
                animation: false,
                backgroundColor: "#404a59",
                tooltip: {
                    trigger: 'axis'
                },
                geo: {
                    map: 'yangzhou',
                    // silent: true,
                    roam: true,
                    zoom: 1.155, // 地图初始大小
                    label: {
                        emphasis: {
                            show: false,
                            areaColor: '#eee'
                        }
                    },
                    // 地区块儿颜色
                    itemStyle: {
                        normal: {
                            areaColor: '#55C3FC',
                            borderColor: '#fff'
                        },
                        emphasis: {
                            areaColor: '#21AEF8'
                        }
                    }
                }
            };

            function renderEachCity() {
                var option2 = {
                    xAxis: [],
                    yAxis: [],
                    grid: [],
                    series: []
                };
                echarts.util.each(rawData, function(dataItem, idx) {
                    var geoCoord = geoCoordMap[dataItem[0]];
                    var coord = myChart.convertToPixel('geo', geoCoord);
                    idx += '';

                    var inflationData = [30,50,20];

                    option2.xAxis.push({
                        id: idx,
                        gridId: idx,
                        type: 'category',
                        name: dataItem[0],
                        nameLocation: 'middle',
                        nameGap: 3,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: '#666'
                            }
                        },
                        data: ["数据A","数据B","数据C"],
                        z: 100

                    });
                    option2.yAxis.push({
                        id: idx,
                        gridId: idx,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#1C70B6'
                            }
                        },
                        z: 100
                    });
                    option2.grid.push({
                        id: idx,
                        width: 30,
                        height: 40,
                        left: coord[0] + 10,
                        top: coord[1] - 30,
                        z: 100
                    });
                    option2.series.push({
                        id: idx,
                        type: 'bar',
                        xAxisId: idx,
                        yAxisId: idx,
                        barGap: 0,
                        barCategoryGap: 0,
                        data: inflationData,
                        z: 100,
                        itemStyle: {
                            normal: {
                                color: function(params){
                                    // 柱状图每根柱子颜色
                                    var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    });
                });
                console.time('a');
                myChart.setOption(option2);
                console.timeEnd('a');
            }

            setTimeout(renderEachCity, 0);
            myChart.on('geoRoam', renderEachCity);
            myChart.setOption(option);





        });


    // 市区坐标
    var geoCoordMap = {
        "广陵区": [119.442267,32.392154],
        "邗江区": [119.397777,32.377899],
        "江都区": [119.567481,32.426564],
        "宝应县": [119.321284,33.23694],
        "仪征市": [119.182443,32.271965],
        "高邮市": [119.443842,32.785164],
    };
    var rawData = [
        ["广陵区",10,20,30],
        ["邗江区",10,20,30],
        ["江都区",10,20,30],
        ["宝应县",10,20,30],
        ["仪征市",10,20,30],
        ["高邮市",10,20,30],
    ];

</script>
</body>
</html>

地图JOSN数据下载地址：http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4

参考文章：

https://blog.csdn.net/Bs__Q/article/details/77800554

程序员不丑009

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【Echarts】二维地图叠加柱状图

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echarts 地图</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src..
复制链接

扫一扫

专栏目录