直播带货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地图数据信息流向图效果实现的相关代码,更多内容欢迎关注之后的文章