直播带货app开发,echarts地图数据信息流向图

直播带货app开发,echarts地图数据信息流向图效果实现的相关代码
代码:

复制代码
```handlebars
<template>
<div class="echarts">
<div :style="{height:'500px',width:'500px'}" ref="myEchart"></div>
</div>
</template>
<script>
import echarts from "echarts";
var geoCoordMap = {
ww: [100, 100],
xx: [200.00461, 200.01165],
zz: [400.00461, 300.08395],
cc: [300.8432, 300.08395],
zjq: [400.8432, 100.08395],
yy: [250, 500]
};
export default {
mounted() {
this.chinaConfigure();
},
methods: {
chinaConfigure() {
let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = myChart.resize;
myChart.setOption({
backgroundColor: "#000079",
geo: {
map: "zjq"
},
series: [
{
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 5, //箭头指向速度,值越小速度越快
trailLength: 0.2, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 6 //图标大小
},
lineStyle: {
normal: {
color: "#a6c84c",
width: 0.2, //尾迹线条宽度
opacity: 0.2, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
},
emphasis: {
width: 3,
opacity: 0.5
}
},
data: [
{
coords: [geoCoordMap["yy"], geoCoordMap["xx"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["ww"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["zz"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["cc"]]
},
{
coords: [geoCoordMap["yy"], geoCoordMap["zjq"]]
}
]
}
]
});
}
}
};
</script>
<style scoped>
.echarts {
height: 100%;
width: 100%;
display: block;
}
</style>
```
复制代码

 


以上就是 直播带货app开发,echarts地图数据信息流向图效果实现的相关代码,更多内容欢迎关注之后的文章

posted @   云豹科技-苏凌霄  阅读(109)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示