怎么实现在vue中自己用echarts画的地图某一节点上用iconfont画一个小车,后端还可以实时获得小车位置
时间: 2023-05-22 15:05:42 浏览: 150
你可以使用 echarts 自带的 `custom series` 来自定义节点渲染。在节点数据中添加 `symbol` 属性指定自定义图标,同时可以通过 `symbolSize` 控制图标大小。修改节点数据的 `itemStyle` 属性可以设置该节点的样式,包括颜色、边框等。为了实现小车的动态移动,可以使用 `setInterval` 方法定时更新小车位置并重新渲染地图。
下面是示例代码:
```vue
<template>
<div ref="chart" style="width:100%;height:400px;"></div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china";
export default {
mounted() {
const chart = echarts.init(this.$refs.chart);
const option = {
series: [
{
type: "custom",
roam: true,
coordinateSystem: "geo",
renderItem: (params, api) => {
const point = api.coord([params.value[0], params.value[1]]);
const size = api.size([1, 1], [10, 10]);
const symbol = params.value[2];
return {
type: "text",
style: {
text: symbol,
textFont: size[1] + "px iconfont",
textPosition: "inside",
},
position: point,
};
},
data: [
{ name: "北京", value: [116.4, 39.9, "\ue706"], itemStyle: { color: "red" } },
{ name: "上海", value: [121.5, 31.3, "\ue706"], itemStyle: { color: "blue" } },
],
},
],
geo: {
map: "china",
},
};
chart.setOption(option);
// 定时更新小车位置
setInterval(() => {
option.series[0].data[0].value = [116.4 + Math.random() * 2, 39.9 + Math.random() * 2, "\ue73f"];
chart.setOption(option);
}, 1000);
},
};
</script>
<style>
@font-face {
font-family: "iconfont";
src: url("//at.alicdn.com/t/font_2871329_w9ag15d4is.woff2?t=1666547609474") format("woff2"),
url("//at.alicdn.com/t/font_2871329_w9ag15d4is.woff?t=1666547609474") format("woff");
font-weight: normal;
font-style: normal;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
```
其中 `\ue706` 与 `\ue73f` 分别是阿里图标库 `iconfont` 中的小车图标,通过 `textFont` 属性设置字体为 `iconfont` 可以渲染出这些图标。
阅读全文