Vue Echarts中国地图 柱状图 vue组件 (支持自定义)

原创 已于 2022-10-11 11:48:26 修改 · 2.2k 阅读 · 12 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
于 2022-10-06 15:05:14 首次发布
本文介绍了一个基于ECharts的中国地图组件，该组件可在项目中直接使用，并提供了丰富的自定义选项，包括地图尺寸和JSON数据配置等。

效果图：

在git地址拉下代码 ，地图组件地址是 src\components\ChinaEcharts

git地址 开源不易 多多支持https://gitee.com/yongchaolu/echarts-map

组件可以直接在项目中使用

 默认是中国地图 传参分别是：

   areaData： 柱状图显示内容                              Width：自定义地图宽度（默认800px）
   areaItems： 柱状图显示经纬度                         Height：自定义地图高度（默认800px）


数据格式如下图：

 该地图可以修改JSON  从而去自定义地图
         相应地区的json 地图JSON下载
         下载后将文件后缀改为JSON即可。

标签
#vue.js #javascript
六便士，
关注
ThreeJS之3D柱形图
苜蓿花乐园
12-18 2529
学习threejs第二篇，3D柱形图练习，本文参考了网上的实现方式，用html方式进行了实现。通过对数据源的循环，以此生成矩形图，图表使用顶点颜色，同时设置材料的vertexColors属性。此处box1.addAttribute，与threejs的版本有关，新版本中移除了该方法。柱形图分为上下两部分，因此使用了二维数组，表示上半部分和下半部分。
echarts中国地图上显示柱状图，并且柱状图可点击
gxl___的博客
01-02 2万+
先放效果图~~点击之后~~（数据和标题可动态变化）话不多说，直接上代码<link rel="shortcut icon" href="${ctx}/static/img/favicon.ico"> <link rel="stylesheet" href="${ctx}/static/layui_v2/css/layui.css"> <link rel=&am
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
12-10
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip 使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip 使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip 使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用t
Vue+ECharts实现可视化地图
糖果π
05-24 1万+
Apache ECharts 一个基于 JavaScript 的开源可视化图表库，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 本示例，我们使用Vue+ECharts实现可视化地图的制作。 第一步：从 npm 获取Apache ECharts npm install echarts --sa...
基于echarts实现前端中国地图、中国热力地图和广东省地图的展示
chenchuang0128的博客
05-19 4388
利用echarts库在uni-app中实现前端中国地图、中国热力地图和广东省地图的展示
vue全家桶+Echarts+百度地图，搭建数据可视化系统
weixin_33994429的博客
04-25 2402
本文章篇幅略长，内容有点多 大佬可根据目录选择性查阅 新人可一步步来阅读 新增文章：vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇） 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。 本人之前从未接触过Echarts，然后需要2周拿出成果，有点慌
基于Threejs/Webgl管道三维流动&三维图表展示(曲线图柱状图饼图仪表仪盘)功能 项目实战二
11-15
针对webgl的库threejs框架项目功能实战讲解管道三维流动：对工厂、园区的管道（输气管道、输水管道、输油管道等）液体 气体流动进行实时监控，根据流向、流速对管道进行三维动态模拟效果。三维图表展示：设备实时数据和运行状态在三维场景中仪表盘可视化展示，三维的压力表、流量计、电压电流表。曲线图柱状图饼图三维可视化统计，工厂产能或生产数据做图形图表统计和实时数据查看。threejs 98版本开发环境（IDE） WebStorm 2019.2 版本
vue + 百度地图上呈现柱状图数据
Caristop3_走在前端这条大道上
12-04 2009
关于如何使用百度地图API这里就不多复述了，这里是工作中遇到的问题，简单的记录下，来直接上需求： 在百度地图中根据城市坐标呈现对应的柱状图信息。这里主要使用了百度提供的“覆盖物”接口来自定义图形 效果图 <template> <div class="test"> <div id="allmap" style="width: 50%; height: ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
xiaoyaoluntian的博客
10-04 6258
echarts 地图添加柱状图，并给柱状图添加点击事件 效果如下所示： 参考文档： https://www.jianshu.com/p/c816d242e261 起因： 最近有朋友有需求需要用echarts，在地图上显示柱状图，并添加点击事件，网上有demo,但是比较老，用原生html+js写的，并且是非组件性质，使用起来并不友好，故而，写了这个echarts组件 Git地址 配置文档： 在git地址拉下代码 ，echarts 组件地址是 src\components\echarts 把组件放到自己项目
Vue项目中集成ECharts实现中国地图可视化
while_you001的博客
12-28 2439
通过这些步骤，你可以在Vue项目中集成ECharts并展示一个交互式的中国地图。你还可以访问ECharts官网，了解更多关于地图配置的自定义选项，以进一步增强你的地图可视化效果。在你的Vue组件的模板中，添加一个用于承载ECharts实例的。
vue使用echarts学习实践（饼图、中国地图）
Dream_Fever的博客
06-03 2020
vue中如何使用echarts前言样式展现中国地图散点图饼图中国地图散点图实现步骤饼图实现步骤事件echarts 支持常规的鼠标事件类型都有：区分鼠标点击到了哪里 前言 近期写项目的时候使用到了echarts的图表，一个饼状图和一个中国地图散点图，之前也用过柱状图、关系图、饼图、折线图等等，但是都没总结过文档，这次就趁着来写一些关于饼图和中国地图的基本制作。 样式展现 中国地图散点图 饼图 中国地图散点图实现步骤 在页面中引入echarts import echarts from "echarts"
vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
01-19 3708
vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息；增加涟漪特效动画。本文以吉林省地图为例，来实现吉林省市的地图的绘制。根据数据在地图上显示柱状图信息；增加涟漪特效动画。你也可以显示中国地图或其他身份地图。原理是一样的哦。主要是通过geo地理坐标系组件实现地图绘制。柱状图是利用3个样式（顶部椭圆、中部矩形、底部椭圆）层叠实现的。
VUE+ECharts从数据库中获取数据（柱状图、扇形图）
热门推荐
Willing卡卡的博客
09-12 2万+
本文主要分享了如何使用ECharts画出柱状图、扇形图并与后端交互完成数据的动态更新；包括：环境的echarts的环境搭建，绘制图形、完成后端业务代码；
uni-app使用echarts--h5端--可以实现地图下钻
猿来如此的博客
07-02 5795
uniapp开发h5 创建项目 参考uniapp官网 点此直达 引入echarts 需要引入uniapp插件市场的插件echarts-renderjs 仅支持 app-vue、h5 端 要求 uni-app 2.5.5+ 以上版本 APP端要求使用v3编译器 本例使用的echarts版本为4.2.1；经测试，4.7及以下的版本均会导致h5移动端不能与图形交互 如等到renderjs可与业务层方便的通信时，请自行优化 使用 1.项目中引入echarts.min.js 2.创建e..
vue + echarts 之世界地图
weixin_47409897的博客
12-09 2447
目录vue + echarts 之世界地图world.vue 组件世界地图的数据 vue + echarts 之世界地图 world.vue 组件 <template> <div class="echarts"> <div :class="className" :id="id" :style="{ height: height, width: width }" ref="myEchart" ></
Vue中使用echarts实现柱状图（双柱）
是日前端
10-21 8424
实现效果： echarts使用说明请查看：Vue中使用echarts实现常用图表总结 option配置： option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999'
148. 在 Vue3 中使用 OpenLayers 在地图上添加 ECharts 柱状图
最新发布
小彭的博客
07-09 598
的组合非常适合用于 Web GIS 数据可视化项目，配合 Vue3 可以实现高度组件化、模块化的开发体验。如果这篇文章对你有帮助，欢迎一键三连支持！如需源码或遇到问题欢迎评论区留言交流 👇。
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
仙魁XAN
07-28 9654
Vue开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，vue中添加echarts，然后在vue中简单使用，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。折线图、柱状图、、......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值