vue如何集成raphael.js中国地图的方法示例

前言

raphael.js是一个很小的爪哇岛描述语言库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。此外raphael.js还跨浏览器兼容，而且还兼容老掉牙的IE6啊拉斐尔。射流研究…的官网地址：http://raphaeljs.com/

因为最近的项目要用到中国地图，我需要的比较轻量级，所以没用echarts，选择的这个地图。

效果图

方法如下：

1、安装

国家预防机制安装-保存拉斐尔12、13 .直接上代码

模板div id=' map '/div/模板脚本从拉斐尔导入拉斐尔；导出默认{ name: 'china_map '，data(){ return { China 3360[]}，mounted(){ var R=Raphael('map '，800，600)；R.setViewBox(0，0，600，500)；//调用绘制地图方法这个。绘制地图；var textAttr={ 'fill': '#000 '，' font-size': '12px '，' cursor ' : ' pointer ' }；var _ China=this . China for(var state in _ China){ this。中国[国家]['路径'].颜色=拉斐尔。getcolor(0.9)；((st，state)={ //获取当前图形的中心坐标var xx=st.getBBox().x(ST . GetBox().宽度/2);var yy=st.getBBox().y(ST . GetBox().高度/2);//***修改部分地图文字偏移坐标开关(这个。中国[国家]['名称']){案例'江苏： xx=5；YY-=10；打破；案例河北： xx-=10；yy=20打破；案例天津： xx=10yy=10打破；案例上海： xx=10打破；案例广东： YY-=10；打破；案例澳门： yy=10打破；案例香港： xx=20YY=5；打破；案例甘肃： xx-=40；YY-=30；打破；案例陕西： xx=5；yy=10打破；案例内蒙古： xx-=15；yy=65打破；default: } //写入文字这个。中国[州][' text ']=r . text(xx，yy，this . China[州]['name']).attr(TextAttr)；st[0].onmouseover=function(){ ST . animate({ fill : ST . color，stroke: '#eee'}，500)；_中国[国家]['文本']。toFront()；};st[0].onmouseout=function(){ ST . animate({ fill : ' # 97 d6f 5 '，stroke: '#eee'}，500)；_中国[国家]['文本']。toFront()；};st[0].onclick=function(){ console。log(_ China[state][' name '])；};})(this.china[state]['path']，state)；} }，方法： { paint map(R){ var attr={ ' fill ' : ' # 97 d6f 5 '，' stroke': '#eee '，' stroke-width': 1，' stroke-line join ' : ' round ' }；this.china.aomen={ name: '澳门帕特