xiaoyaoluntian-imitating-dingding-flow-chart/README.md

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的同学请继续看，我尽量描述的详细些

1. 在这里下载地图geoJson把后缀改成.json

2. 在项目中引入

   let mapJson = require("./json/xuzhou.json");
   cityConfig: {
       name: "徐州市",
       dataJson: mapJson
     },
   

3. 当作参数传进组件

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

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