使用echarts map svg 遇到的小坑
最近自己的业务系统需要实现卫星地图来显示建筑物信息的功能,素闻免费开源的echarts有这一功能,于是参照官网资料与示例自己鼓捣起来。
我打算参照该官网的示例“庖丁解牛”来做:
废话不多说,先上代码:
-
-
<!--内容开始-->
-
<section class="content content_main">
-
-
<!-- 用于显示地图的容器 -->
-
<div id="container" style="height: 1080px"></div>
-
<!-- 用于显示地图的容器 -->
-
-
<!-- 以下部分根据需要引入 -->
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
-
<!-- Uncomment this line if you want to dataTool extension
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script>
-
-->
-
<!-- Uncomment this line if you want to use gl extension
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-
-->
-
<!-- Uncomment this line if you want to echarts-stat extension
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-
-->
-
<!-- Uncomment this line if you want to use map
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-
-->
-
<!-- Uncomment these two lines if you want to use bmap extension
-
<script type="text/javascript" src="https://api.map.百度.com/api?v=3.0&ak=YOUR_API_KEY"></script>
-
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.min.js"></script>
-
-->
-
<!-- 以上部分根据需要引入 -->
-
-
-
<script type="text/javascript">
-
var dom = document.getElementById('container');//绑定DOM元素
-
//echarts的初始化设置,基本不用改
-
var myChart = echarts.init(dom, null, {
-
renderer: 'canvas',
-
useDirtyRect: false
-
});
-
var option;//定义设置项
-
//通过jqeury的get方法获取svg文件,并执行回调函数function (svg){}
-
$.get('/static/admin/images/SatelliteMap.svg', function (svg) {
-
echarts.registerMap('Beef_cuts_France', { svg: svg });//注册地图
-
option = {
-
// 鼠标移动至svg元素上会弹出来的提示框
-
tooltip: {
-
//可以格式化其显示的内容,可以使用回调函数,详见说明文档
-
formatter: '{b0}: {c0}<br />'
-
},
-
-
// 以下部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示,这里用不到
-
// visualMap: false,
-
// {
-
// left: 'center',
-
// bottom: '10%',
-
// min: 5,
-
// max: 100,
-
// orient: 'horizontal',
-
// text: ['', 'Price'],
-
// realtime: true,
-
// calculable: true,
-
// inRange: {
-
// color: ['#dbac00', '#db6e00', '#cf0000']
-
// }
-
// },
-
// 以上部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示,这里用不到
-
-
//对数据列的设置
-
series: [
-
{
-
name: 'French Beef Cuts',//数据列的名称
-
type: 'map',//数据列的类别
-
map: 'Beef_cuts_France',//数据列所要绑定的地图
-
roam: true,//是否允许放大
-
//数据列的显示样式
-
itemStyle: {
-
color: 'Yellow',//颜色设置,在我使用的自己绘制的SVG图中,这个设置项可以对svg元素的填充色不起作用
-
borderColor: 'rgba(255,255,0,0.1)',//边框颜色设置
-
borderWidth: 2,//边框粗细设置
-
areaColor: 'rgba(255,0,0,0)',//区域颜色设置,在我使用的自己绘制的SVG图中,这个设置项可以对svg元素的填充色进行设置,前提是svg元素在绘制的时候填充颜色不透明度要大于0
-
},
-
//高亮显示的设置
-
emphasis: {
-
label: {
-
show: false //不显示标签
-
},
-
//高亮时的样式显示
-
itemStyle: {
-
borderColor: 'Yellow',
-
areaColor: 'rgba(255,0,0,0.5)',
-
borderWidth: 2,
-
borderType: 'solid'
-
}
-
},
-
selectedMode: false,//关闭选择模式,即图元为不可选择状态。开启时,同样可以对元素被选中后的样式等进行设置
-
// 以下为测试数据
-
data: [
-
{ name: 'svg_5', value: 15 },//这里的name为svg文件中元素的name属性,很多svg编辑器绘制的svg文件是没有name属性的,必须得自己加上去。
-
{ name: 'svg_6', value: 35 },
-
{ name: 'svg_7', value: 15 },
-
{ name: 'svg_8', value: 25 },
-
{ name: 'svg_9', value: 45 },
-
{ name: 'svg_10', value: 85 },
-
{ name: 'svg_11', value: 25 },
-
{ name: 'svg_12', value: 15 },
-
{ name: 'svg_13', value: 55 },
-
{ name: "svg_14", value: 25 },
-
{
-
//每个元素都可以单独设置其itemStyle、emphasis、tooltip等参数,且该节点的参数设置会覆盖全局的设置。
-
name: 'svg_15', value: 65,
-
itemStyle: {
-
color: 'rgb(255,255,255)',
-
borderColor: 'rgba(255,0,0,1)',
-
borderWidth: 3,
-
-
}
-
},
-
{ name: 'svg_16', value: 45 },
-
{ name: 'svg_17', value: 85 },
-
{ name: 'svg_18', value: 35 },
-
{ name: 'svg_19', value: 75 },
-
{ name: 'svg_20', value: 65 },
-
{ name: 'svg_21', value: 65 },
-
{ name: 'svg_22', value: 85 },
-
{ name: 'svg_23', value: 75 },
-
{ name: 'svg_24', value: 65 },
-
{ name: 'svg_25', value: 55 },
-
{ name: 'svg_26', value: 45 },
-
{ name: 'svg_27', value: 85 },
-
{ name: 'svg_28', value: 15 },
-
{ name: 'svg_29', value: 65 },
-
{ name: 'svg_30', value: 45 },
-
{ name: 'svg_31', value: 85 },
-
{ name: 'svg_32', value: 65 },
-
{
-
name: '北校区', value: 95,
-
itemStyle: {
-
color: 'rgba(255,0,0,0.1)',
-
borderColor: 'rgba(255,0,0,1)',
-
borderWidth: 3,
-
-
}
-
}
-
]
-
}
-
]
-
};
-
myChart.setOption(option);
-
});
-
-
if (option && typeof option === 'object') {
-
myChart.setOption(option);
-
}
-
window.addEventListener('resize', myChart.resize);
-
</script>
-
-
</section>
当然首先,我们得先有SVG文件,可以通过以下网址在线绘制:
可以自己导入背景图,这里我自己做了一张卫星图。
每个建筑都用一个闭合的线条框起来,我是用钢笔工具来画的。注意每个颜色的内部都可以预先填充一种颜色,透明度建议100%,因为在echarts中是可以进行调整的,但是只能降低原有透明度,而不能在原有的透明度值上增加。
画好以后,保存为svg文件,用代码编辑器打开,可以看到里面除了背景图base64代码以外,就是一个个<path>标签。
-
<path
-
//填充颜色
-
fill="#20cccc"
-
//边框颜色
-
stroke="#f90929"
-
//边框线条大小
-
stroke-width="6"
-
//边框透明度
-
stroke-opacity="null"
-
//边框虚线风格设置
-
stroke-dasharray="5,2,2,2,2,2"
-
//填充透明度,如需在使用效果中显示和调整,该项目值必须大于0
-
fill-opacity="0"
-
//整体透明度
-
opacity="0.5"
-
//路径点
-
d="m2319.14899,1463.82976"
-
-
id="svg_12"
-
//必须包含name属性,echarts才能够识别显示
-
name="svg_12"
-
-
/>
总结
有两个小坑,一个是svg元素必须设置name属性,才能在echarts中显示出来。二是如果要使echarts元素中的 areaColor设置起作用,必须在编辑制作SVG文件的时候将元素的填充透明度“fill-opacity”设置为大于0。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhkgf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13