## vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
效果如下所示：

<img src="https://img-blog.csdnimg.cn/20201004170925190.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW9sdW50aWFu,size_16,color_FFFFFF,t_70#pic_center"/>

### 参考文档：
[这是参考的文档](https://www.jianshu.com/p/c816d242e261)

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

[Git地址 开源不易 求star 谢谢了](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)

### 配置文档：
在git地址拉下代码 ，echarts 组件地址是 src\components\echarts
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201004173828633.png#pic_center)

把组件放到自己项目里 正常引用
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201004171433497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW9sdW50aWFu,size_16,color_FFFFFF,t_70#pic_center)
使用方式 
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201004171515493.png#pic_center)
默认是北京地图 数据自己胡乱写的， 实际应用的时候可按如下方式传参： 详情见demo

```html
<echarts-demo
      :areaData="areaData"
      :option="option"
      :cityConfig="cityConfig"
      :areaItems="areaItems"
    ></echarts-demo>
```
传参格式 请参照如下配置
```javascript
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     [这里是下载地址](https://blog.csdn.net/xingchen678/article/details/100928135)
#### 详情见[DEMO](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)中echartDemo页面
懒得看git的同学请继续看，我尽量描述的详细些
1. 在[这里](https://blog.csdn.net/xingchen678/article/details/100928135)下载地图geoJson把后缀改成.json
2. 在项目中引入  
```javascript
let mapJson = require("./json/xuzhou.json");
cityConfig: {
        name: "徐州市",
        dataJson: mapJson
      },
```
3. 当作参数传进组件
  ```html
  <echarts-demo
      :areaData="areaData"
      :option="option"
      :cityConfig="cityConfig"
      :areaItems="areaItems"
    ></echarts-demo>
  ```

方法二：1.进入到 src\components\echarts\echartsSimple.vue 页面
修改以下引入方式![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100417393660.png#pic_center)
2.修改option中 map相对应的名字
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201004174032432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW9sdW50aWFu,size_16,color_FFFFFF,t_70#pic_center)
以上就是一个开箱即用的echarts简单组件，之后会维护 自定义样式，标题，等功能，如有需要请点赞留言，非常感谢，开源不易 求star  谢谢了