echarts 地图加涟漪加路线加移入

前言

echarts地图，点对点的动画效果，指向高亮

`效果图`

代码详解

// 请当做组件引入使用  坐标自行找一下
<template><!-- 地图容器 --><div ref="pcMap" style="width: 100%; height: 100%"></div>
</template><script>
// 引入前先装依赖 echarts
import echarts from 'echarts'
import './../../../node_modules/echarts/map/js/china.js'// 接收参数
export default {props: {// 接收涟漪点mappoints: {type: Array,default: []},// 接收路线 lineColor: {type: Array,default: []},},data() {return {// 获取地图容器charts: '',// 个人习惯用俩个字段来接收points:this.mappoints,listColor:this.lineColor,// 以下两组数据为例子，来看数据结构  实际不需要// 路线图 listColor:[ // 从哪里 到 哪去 路线颜色{ "coords": [ [ 112.56272, 37.87343 ], [ 118.8062, 31.9208 ] ], "lineStyle": { "color": "#14C7F2" } },{ "coords": [ [ 112.56272, 37.87343 ], [ 106.3586, 38.1775 ] ], "lineStyle": { "color": "#14C7F2" } },{ "coords": [ [ 112.56272, 37.87343 ], [ 108.384366, 30.439702 ] ], "lineStyle": { "color": "#14C7F2" } },],// 涟漪点points: [// 坐标，涟漪颜色{ value: [118.8062, 31.9208], itemStyle: { color: "#14C7F2" } },{ value: [127.9688, 45.368], itemStyle: { color: "#14C7F2" } },{ value: [110.3467, 41.4899], itemStyle: { color: "#14C7F2" } },{ value: [125.8154, 44.2584], itemStyle: { color: "#14C7F2" } },{ value: [116.4551, 40.2539], itemStyle: { color: "#14C7F2" } },{ value: [123.1238, 42.1216], itemStyle: { color: "#14C7F2" } },{ value: [114.4995, 38.1006], itemStyle: { color: "#14C7F2" } },{ value: [117.4219, 39.4189], itemStyle: { color: "#14C7F2" } },{ value: [112.3352, 37.9413], itemStyle: { color: "#14C7F2" } },{ value: [109.1162, 34.2004], itemStyle: { color: "#14C7F2" } },{ value: [103.5901, 36.3043], itemStyle: { color: "#14C7F2" } },{ value: [106.3586, 38.1775], itemStyle: { color: "#14C7F2" } },{ value: [101.4038, 36.8207], itemStyle: { color: "#14C7F2" } },{ value: [103.9526, 30.7617], itemStyle: { color: "#14C7F2" } },{ value: [108.384366, 30.439702], itemStyle: { color: "#14C7F2" } },{ value: [113.0823, 28.2568], itemStyle: { color: "#14C7F2" } },{ value: [102.9199, 25.46639], itemStyle: { color: "#14C7F2" } },{ value: [112.3352, 37.9413] },],// ==============================================================}},watch: {// 监听 路线 与 涟漪点数据的变化mappoints: {handler(val) {this.points = val},},lineColor: {handler(val) {this.listColor = val},},},mounted() {// 调用构建地图的函数 this.getJson()},methods: {// 中国地图getJson() {// 通过ref获取 地图容器this.charts = echarts.init(this.$refs.pcMap)// 监听并重新加载echarts （自适应大小）window.addEventListener('resize', () => {this.charts.resize()})this.charts.setOption({geo: {map: 'china',aspectScale: 0.75, //长宽比zoom: 1.25,roam: false,itemStyle: {normal: {areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(0,0,0,0)', // 0% 处的颜色},{offset: 1,color: 'rgba(0,0,0,0)', // 100% 处的颜色},],globalCoord: true, // 缺省为 false},// 外层边框borderWidth: 1, //设置外层边框borderColor: '#999',// shadowColor: '#022764',// shadowOffsetX: 10,// shadowOffsetY: 11,},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: '#FFAF4D',label: {show: false,},},},regions: [{name: '南海诸岛',itemStyle: {areaColor: 'rgba(0, 10, 52, 1)',borderColor: 'rgba(0, 10, 52, 1)',normal: {opacity: 0,label: {show: false,color: '#009cc9',},},},},],},series: [{type: 'map',roam: false,label: {normal: {show: true,textStyle: {color: '#999',},},emphasis: {// 移入字体颜色textStyle: {color: '#fff',},},},itemStyle: {normal: {borderColor: 'rgba(255,255,255,.4)',borderWidth: 1,// areaColor: "#00246C",areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,// 从内到外渐变colorStops: [{offset: 0,color: 'rgba(5,47,85,0.5)', // 0% 处的颜色},{offset: 1,color: 'rgba(5,47,85,0.5)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},},// 移入地图背景色emphasis: {areaColor: 'rgba(17,106,135,0.7)',shadowColor: 'rgb(12,25,50)',borderWidth: 0.1,},},zoom: 1.25,aspectScale: 0.75, //长宽比map: 'china', //使用// data: this.difficultData //热力图数据   不同区域 不同的底色},// 涟漪点动画效果{type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 10,rippleEffect: {// 动画速度period: 5,scale: 20,brushType: 'stroke',},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'left',offset: [15, 0],color: '#1DE9B6',show: true,},},itemStyle: {normal: {color: '#1DE9B6',shadowBlur: 10,shadowColor: '#333',},},symbolSize: 5,data: this.points,},//地图线的动画效果{type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 7, //图标大小},lineStyle: {normal: {color: '#1DE9B6',width: 1, //线条宽度opacity: 0.1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度},},data: this.listColor,},],})},},
}
</script>

echarts 地图加涟漪加路线加移入相关推荐

echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
echarts地图罗平县的json_Echarts 加载省地图json
我想要的效果: 解决步骤: 1.安装引入 npm install echarts import Echarts from 'echarts' // 全局注册Echarts Vue.prototype. ...
echarts——地图map加引导线、labelLine效果
echarts地图map有时因数据较密集,label会叠加在一起,只有饼图pie有labelLine引导线,如下两种方法可以实现地图map添加引导线. 实现效果如下,可以直接在echarts编辑器运行 ...
echarts与TmodJS的冲突 -- 模块化加载器之间的冲突
前些日子写了一篇关于腾讯模板引擎TmodJS的文章<模板引擎artTemplate及模板预编译器TmodJS的使用入门>,算是对其原理与使用进行了初步的接触与研究.近期在一个项目中对Tmo ...
【百度地图】——利用三级联动加载百度地图
[百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...
echarts中饼图的异步数据加载绘制
ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行,但是从后台异步获取数据后,需要在前台 ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
Echarts使用心得总结——异步数据加载
异步加载 Echarts的数据一般是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入.ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要使用 ...
百度地图Javascript使用海量点加载数据并自定义图标
** 百度地图Javascript使用海量点加载数据并自定义图标由于数据量较大时使用Marker点在地图上标点会造成浏览器卡死,点聚合的形式可以解决数据量大浏览器卡死问题,但是移除点时点聚合不太好用 ...

echarts 地图加涟漪加路线加移入

前言

`效果图`

代码详解

echarts 地图加涟漪加路线加移入相关推荐

最新文章

热门文章

echarts 地图 加涟漪 加路线 加移入

前言

效果图

代码详解

echarts 地图 加涟漪 加路线 加移入相关推荐

最新文章

热门文章

echarts 地图加涟漪加路线加移入

`效果图`

echarts 地图加涟漪加路线加移入相关推荐