echarts 地图添加柱状图,并给柱状图添加点击事件(支持自定义地图)

时间:2020-10-5 作者:admin

echarts 地图添加柱状图,并给柱状图添加点击事件(支持自定义地图)

效果如下所示:

echarts 地图添加柱状图,并给柱状图添加点击事件(支持自定义地图)

参考文档:

这是参考的文档

起因:

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

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

配置文档:

在git地址拉下代码 ,echarts 组件地址是 src\components\echarts
echarts 地图添加柱状图,并给柱状图添加点击事件(支持自定义地图)

把组件放到自己项目里 正常引用
echarts 地图添加柱状图,并给柱状图添加点击事件(支持自定义地图)
使用方式
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
      },
  1. 当作参数传进组件
<echarts-demo
    :areaData="areaData"
    :option="option"
    :cityConfig="cityConfig"
    :areaItems="areaItems"
  ></echarts-demo>

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。