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

最新推荐文章于 2024-04-28 12:05:22 发布
最新推荐文章于 2024-04-28 12:05:22 发布
阅读量2.4k 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33966519/article/details/105806134
版权

平时项目中，我们经常会需要引入地图，省或者市或者区。可以应用在各种大数据可视化领域。先看效果吧：
在这里插入图片描述
一、下载绍兴市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>
ECharts实现数据可视化入门教程（超详细）
2401_84092143的博客
04-19 1072
ECharts入门教程。
基于ECharts数据可视化案例--世界疫情实时展示
weixin_45362837的博客
05-31 6777
这篇文章主要是写在论文之前。写者的毕业论文中没有涉及该部分实现，因此使用博客的方式记录案例或者功能的实现。 世界疫情实时展示和之前的中国疫情实时展示差不多，同样是使用了官方的地图插件，此外使用了Gallery社区的模板。重点一如既往的是数据的获取和压入。
dataviz-gallery：炫酷数据可视化的集合
02-05
数据可视化库 酷数据可视化的集合 访问： 画廊 各种音乐艺术家的总下载量 ， - DataViz Mastery第1部分-树状图- DataViz Mastery Part 2-词云-， ...更多
Echarts gallery地图使用及效果
Crayon111的博客
03-16 3856
这次使用的地图为中国各省份地图 下面简单说一下如何引入和使用 步骤1： 在项目中安装Echarts的依赖 npm install echarts --save 然后在main.js中引入并使用 import echarts from "echarts"; Vue.prototype.$echarts = echarts （当然也可以在echarts官方下载安装包导入项目内，也可以通过script标签引入，方法很多） 步骤2： 找到自己需要的地图 echarts gallery 步骤3： 选择好自己需
【Echarts Gallery】简单使用
BMG-Princess
02-23 6179
1、引入echarts.js 2、打开官网 Echarts Gallery 3、选择echarts gallery中模板，只要复制echarts gallery上的代码插入到其中的位置 4、资源免费链接 流量监测及环形图概览图汇总.7z
echarts gallery和数据可视化技术分享
初心不改，事在人为
09-23 2029
图表网站
echarts gallery，echarts社区地址（可视化作品分享的地址）
m0_67266585的博客
02-26 2396
https://www.makeapie.com/explore.html 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。 由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。 还有免费的 高级web全
Echarts做地图这类的可视化时候需要的bmap.js文件
08-25
Echarts做地图这类的可视化时候需要的js文件，自己做过几个地图在社区里，大家可以去参考参考，，这里是我echarts社区个人主页...
ECharts实现数据可视化入门教程（超详细）(2)
2401_84418883的博客
04-28 1022
ECharts的基础配置。
ECharts数据可视化项目
Sweat_candy的博客
04-05 2530
可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展
echarts中国城市
07-12
echarts中国地级市调用必备，，，
2022年echarts浙江省最新11市json地图
03-21
2022年自己调整过使用过的echarts浙江省最新11市json地图，包括舟山市，杭州市，嘉兴市，温州市，宁波市，绍兴市，湖州市，丽水市，台州市，金华市，衢州市。
echarts地图扩展浙江省geoJSON地图数据
10-13
浙江省地图json文件。可用于echarts地图绘制浙江省地图区域
echarts 社区 gallery
Jermyo的博客
02-01 835
echarts 社区 gallery 地址：makeapie.cn。
echarts社区Gallery
zhurenjin的博客
03-17 559
主要是echart的一些操作界面
ECharts Gallery和Make A Pie都关了，你可以用这个工具替代
02-09 5884
ECharts Demo集ECharts Gallery和Make A Pie都关了，你可以用这个工具替代背景开发规划 ECharts Gallery和Make A Pie都关了，你可以用这个工具替代 背景 ECharts Gallery和Make A Pie都关了，打不开了，很多人包括我自己都在使用这个工具，工具面临关闭，我便制作了替代工具，放在了外网上，ECharts Demo集镜像地址是https://www.isqqw.com/ 当前是初版直接使用，后面我会上线代码上传分享等功能 开发规划 后期我将
echarts gallery 简单使用
热门推荐
我是泛滥
09-16 1万+
echarts gallery上有相应的图形对应的代码，复制即可使用。 1.html 引入echarts.js包 <script src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script> 2.选择echarts gallery中模板，只要复制echarts gallery上的代码插入到其中的位置就行。 中国地图展示 // 基于准
echarts的gallery类似图表库
tt1234561009的博客
04-28 589
最近发现echarts的gallery访问不了了，于是找了一些其他的图表网站，有需要的小伙伴们可以去这上面看看。
echarts的gallery无法访问
烟雨任平生╰的博客
05-30 674
echarts的gallery无法访问,找到一个替代地址，注意收藏 ECharts Demo集 两个地址都可以： [1]: ：https://www.isqqw.com/ [2]: ：https://echarts.isqqw.com/
数据可视化工具介绍echarts
最新发布
02-24
### ECharts 数据可视化工具详细介绍 #### 特性概述 ECharts 是一款基于 JavaScript 的开源可视化库，能够流畅地运行于 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11、Chrome、Firefox、Safari 等），整体体积轻盈，官方提供了在线实例 gallery 及详细的文档支持[^1]。 #### 基础功能与优势 - **丰富的图表类型**：提供折线图、柱状图、散点图、饼图等多种基本图形，并且可以组合成复杂而美观的数据视图。 - **交互性强**：内置缩放、平移、提示框等功能，允许用户通过鼠标或触摸操作来探索更多细节信息。 - **高度定制化**：几乎所有的视觉属性都可以被配置修改，包括但不限于颜色方案、字体样式以及动画效果等。 - **良好的扩展性和易用API接口设计**：不仅易于集成第三方插件，还拥有简洁明了的方法调用来满足开发者需求。 #### 安装方式 对于希望减少项目依赖大小的应用场景而言，可以选择引入精简版本 `echarts.simple.js` 文件，该文件只包含了最为常用的功能模块，适合追求极致性能优化的情况[^3]。 ```html <!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/incubator-echarts@latest/dist/echarts.min.js"></script> ``` #### 初始化并绘制简单图表示例 下面是一个简单的 HTML 页面代码片段用于初始化一个 div 容器并将之设置为 EChart 实例对象： ```javascript // 创建基于准备好的 DOM，初始化 echarts 实例 var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '某站点用户访问来源' }, tooltip: {}, legend: { data:['人数'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', // 设置图表类型为柱状图 data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); ``` 上述代码展示了如何创建一个基础的柱形图，其中设置了标题、坐标轴标签以及其他必要的参数选项。实际应用中可根据具体业务逻辑调整这些设定以达到理想的效果显示。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值