使用echarts gallery制作绍兴市线图可视化效果

最新推荐文章于 2024-05-15 09:53:41 发布

Effortzjw

最新推荐文章于 2024-05-15 09:53:41 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： echarts

本文链接：https://blog.csdn.net/qq_33966519/article/details/105806134

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

平时项目中，我们经常会需要引入地图，省或者市或者区。可以应用在各种大数据可视化领域。先看效果吧：
在这里插入图片描述
一、下载绍兴市geoJson数据文件： https://www.makeapie.com/editor.html?c=xmCAi_XNuJ

二、官网下载echarts.min.js： https://echarts.baidu.com/download.html
三、下面是实现这个效果的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>绍兴</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:600px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        //替换GALERY中代专码
        var uploadedDataURL = "json/shaoxing.geoJson"

        $.getJSON(uploadedDataURL, function (geoJson) {
            echarts.registerMap('shaoxing', geoJson);
            //以下这些数据可在json中找到各个区域的经纬度
            var chinaGeoCoordMap = { 
                "越城区": [120.585315, 29.996993],
                "柯桥区": [120.476075, 30.078038],
                "上虞区": [120.874185, 30.016769],
                "诸暨市": [120.244326, 29.713662],
                "嵊州市": [120.82888, 29.586606],
                "新昌县": [120.905665, 29.501205]
            };
            var chinaDatas = [
                // [{
                //     name: '越城区',
                //     value: 0
                // }],
                [{
                    name: '柯桥区',
                    value: 0
                }],
                [{
                    name: '上虞区',
                    value: 0
                }],
                [{
                    name: '诸暨市',
                    value: 0
                }],
                [{
                    name: '嵊州市',
                    value: 0
                }],
                [{
                    name: '新昌县',
                    value: 0
                }]
            ];

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = chinaGeoCoordMap[dataItem[0].name];
                    var toCoord = [120.585315, 29.996993];
                    if (fromCoord && toCoord) {
                        res.push([{
                            coord: fromCoord,
                            value: dataItem[0].value
                        }, {
                            coord: toCoord,
                        }]);
                    }
                }
                return res;
            };

            var series = [];
            [
                ['越城区', chinaDatas]
            ].forEach(function (item, i) {
                console.log(item)
                series.push({
                    type: 'lines',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 4, //箭头指向速度，值越小速度越快
                        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: 5, //图标大小
                    },
                    lineStyle: {
                        normal: {
                            width: 1, //尾迹线条宽度
                            opacity: 1, //尾迹线条透明度
                            curveness: .3 //尾迹线条曲直度
                        }
                    },
                    data: convertData(item[1])
                }, {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: { //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: 'stroke', //波纹绘制方式 stroke, fill
                        scale: 4 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right', //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: function (params) { //圆环显示文字
                                return params.data.name;
                            },
                            fontSize: 13
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: 'circle',
                    symbolSize: function (val) {
                        return 5 + val[2] * 5; //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                            color: '#f00'
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[0].name,
                            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                        };
                    }),
                },
                    //被攻击点
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            period: 2,
                            brushType: 'stroke',
                            scale: 5
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                // offset:[5, 0],
                                color: '#0f0',
                                formatter: '{b}',
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            emphasis: {
                                show: true,
                                color: "#f60"
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 5,
                        data: [{
                            name: item[0],
                            value: chinaGeoCoordMap[item[0]].concat([10]),
                        }],
                    }
                );
            });

            option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(166, 200, 76, 0.82)',
                    borderColor: '#FFFFCC',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: 'z-index:100',
                    formatter: function (params, ticket, callback) {
                        //根据业务自己拓展要显示的内容
                        var res = "";
                        var name = params.name;
                        var value = params.value[params.seriesIndex + 1];
                        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                        return res;
                    }
                },
                backgroundColor: "#013954",
                visualMap: { //图例值控制
                    min: 0,
                    max: 1,
                    calculable: true,
                    show: true,
                    color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'shaoxing',
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true, //是否允许缩放
                    itemStyle: {
                        normal: {
                            color: 'rgba(51, 69, 89, .5)', //地图背景色
                            borderColor: '#516a89', //省市边界线00fcff 516a89
                            borderWidth: 1
                        },
                        emphasis: {
                            color: 'rgba(37, 43, 61, .5)' //悬浮背景
                        }
                    }
                },
                series: series
            };

            myChart.setOption(option);
        });
    </script>
</body>

</html>

Effortzjw

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
使用echarts gallery制作绍兴市线图可视化效果

平时项目中，我们经常会需要引入地图，省或者市或者区。可以应用在各种大数据可视化领域。先看效果吧：一、获取绍兴市geoJson数据文件： https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ二、官网下载echarts.min.js： https://echarts.baidu.com/download.html三、下面是实现这个效果的...
复制链接

扫一扫