svg画图
svg教程:https://www.w3school.com.cn/svg/svg_example.asp
svg编辑器:https://c.runoob.com/more/svgeditor/
1、首先打开svg编辑器,使用PathTo(工具)点选物件,点选后为白色区域,保存图片,在编辑器(如vscode)中打开图片,在中有两个xlink:href的字段,删掉一个,多余了,在此字段的最后添加name=“##”(划上去显示的字段),在下面会显示你点选的所有部分的path,在每个path后加上name="###"保存后引入你的文件夹就可以使用了。
<template>
<div ref="chart" class="chart"/>
</template>
<script>
import park from '@/map/svg.svg'
export default {
name: 'AreaMap',
data() {
return {
chart: null,
}
},
mounted() {
this.chart = this.$echarts.init(this.$refs.chart)
this.$axios(park).then(res => {
this.$echarts.registerMap('park', { svg: res.data })
this.draw()
this.chart.resize()
})
},
beforeDestroy() {
this.chart.dispose()
},
methods: {
draw() {
this.chart.setOption({
// 提示框(浮窗)组件
tooltip: {
show: true,
// trigger: 'item', // 触发类型,数据项图形触发
// showDelay: 0, // 浮窗显示延时
// hideDelay: 0, // 浮窗隐藏延时
// transitionDuration: 0, // 提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
// backgroundColor: 'rgba(0, 0, 0, 0.8)', // 浮窗背景颜色
// borderWidth: 1,
// borderColor: '#08b1e7',
// textStyle: {
// color: '#fff',
// },
// // 浮窗内文本格式
// formatter: params => {
// if (params.seriesType === 'effectScatter') {
// return '节点 ' + params.data.name
// } else {
// return '链路 ' + params.data.name
// }
// },
},
// 地理坐标系
geo: {
map: 'park',
layoutCenter: ['60%', '50%'],
layoutSize: 2100,
// silent: true,
// zoom: 1.7,
// label: {show: false},
// roam: true, // 是否允许缩放
// // 缩放倍数范围
// scaleLimit: {
// min: 1.2,
// max: 10,
// },
// 地图区域的多边形样式
itemStyle: {
borderColor: '#ffffff',
borderWidth: 1,
areaColor: '#ffffff00',
},
// 光标移上去的样式
emphasis: {
label: {
show: false,
color: 'white',
fontSize: 16,
},
itemStyle: {
// borderColor: '#02bbd4',
// borderWidth: 1,
areaColor: '#ffffff80',
},
},
},
}, true)
},
},
}
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
margin: 0 auto;
}
</style>