vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）

vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）

效果如下所示：

参考文档：

这是参考的文档

起因：

最近有朋友有需求需要用echarts，在地图上显示柱状图，并添加点击事件，网上有demo,但是比较老，用原生html+js写的，并且是非组件性质，使用起来并不友好，故而，写了这个echarts组件

Git地址 开源不易 求star 谢谢了

配置文档：

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

把组件放到自己项目里 正常引用 使用方式 默认是北京地图 数据自己胡乱写的， 实际应用的时候可按如下方式传参： 详情见demo

<echarts-demo :areaData="areaData" :option="option" :cityConfig="cityConfig" :areaItems="areaItems" ></echarts-demo>

传参格式 请参照如下配置

areaData : [{ //与业务结合 { areaName: "丰县", // 地域名字 DateItems: [ // 柱状图配置 { title: "标题1", //柱状图 x轴标题名字 value: "10" // 数值 }, { title: "标题2", value: "20" }, { title: "标题3", value: "30" } ] }, }], option: { backgroundColor: "#02AFDB", tooltip: {}, geo: { map: "徐州市", 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)" } } } }, colorList:[], // 每条柱子的颜色 传颜色数组 如["red","yellow","#F4E001"] areaItems: { 丰县: [116.59957, 34.69972] }, //需要填充的坐标 例如 网上有 可以自己去编辑 cityConfig: { name: "徐州市", dataJson: mapJson // 你自己下载的地域json },

由于各公司业务不同，需要用到不同的地图，以下是地图修改的方式

方法一： 在网上下载相应地区的json 这里是下载地址

详情见DEMO中echartDemo页面

懒得看git的同学请继续看，我尽量描述的详细些

在这里下载地图geoJson把后缀改成.json在项目中引入 let mapJson = require("./json/xuzhou.json"); cityConfig: { name: "徐州市", dataJson: mapJson }, 当作参数传进组件 <echarts-demo :areaData="areaData" :option="option" :cityConfig="cityConfig" :areaItems="areaItems" ></echarts-demo>

方法二：1.进入到 src\components\echarts\echartsSimple.vue 页面 修改以下引入方式 2.修改option中 map相对应的名字 以上就是一个开箱即用的echarts简单组件，之后会维护 自定义样式，标题，等功能，如有需要请点赞留言，非常感谢，开源不易 求star 谢谢了

笔者致力于开发遇到的各种复杂组件，虽说授人以鱼不如授人以渔，但是很多情况下我们是需要先恰饭的，所以先鱼钓上来，希望帮各位刚上路的道友填饱肚子

以下是我所有组件开源的地址与博客 希望各位多点赞多star

前端组件集合文章 vue组件-echarts地图显示柱状图并添加点击事件文档 vue组件之仿钉钉自定义流程图组件文档 vue组件之树状选择器组件文档 最后给我的老东家打个广告，金现代企业股份有限公司做的项目真的不错，在里面带的一年里，成长很多，尤其在那里接触到了UML统一建模语言，对专业技能提升真的很大。在此感恩。