echarts区域地图，自动高亮区域信息

代码部分

获得区域的JSON数据的网址地图选择器

mapData的数据顺序要和JSON中排列的顺序一样，不然自动高亮的区域和tooltip会不一致

<template><div class="line-wrapper"><div:id="'echartMapPieChart'+this.$attrs.index":style="{width:component.width+'px',height:component.height+'px'}"></div></div>
</template>
<script>
// import areaJson from "./../../../assets/zhejiang.json";
export default {name: "EchartMap",props: {option: Object,component: Object,},data() {return {timer: null,};},mounted() {// this.echartsInit();// console.log(areaJson);var time = this.$attrs.time;this.requestData();const that = this;if (time) {setInterval(function () {that.requestData();}.bind(that),time);}},methods: {requestData() {var url = this.$attrs.url;var tag = this.$attrs.data.tag;this.screenId = this.$attrs.data.screenId;this.$request.post(url, {screenId: this.screenId,tag,}).then((res) => {const { areaJson, mapDate } = res.data.data;// console.log("客源分析", areaJson, mapDate);this.echartsInit(areaJson, mapDate);});},echartsInit(areaJson, mapDate) {//忽略这些this.option里的属性const {areaColor,title,titleY,titleX,titleSize,citySize,tooltipSize,areaShadowColor,areaBorderColor,areaHighColor,legendRight,legendBottom,unit,rate,} = this.option;const that = this;const echarts = require("echarts");const myChart = echarts.init(document.getElementById(`echartMapPieChart${this.$attrs.index}`));// var areaJson =//   "https://geo.datav.aliyun.com/areas_v2/bound/330000_full.json";// var areaJson = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";myChart.showLoading();let index = -1;that.timer = setInterval(function () {// 隐藏提示框// myChart.dispatchAction({//   type: 'hideTip',//   seriesIndex: 0,//   dataIndex: index// });// 显示提示框myChart.dispatchAction({type: "showTip",seriesIndex: 1,dataIndex: index + 1,});// 取消高亮指定的数据图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 13) {index = -1;}}, 2000);myChart.on("click", function (e) {clearInterval(that.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 1,dataIndex: e.dataIndex,});});myChart.on("mousemove", function (e) {clearInterval(that.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 1,dataIndex: e.dataIndex,});}); //---------------------------------------------鼠标移入静止播放myChart.on("mouseout", function (e) {clearInterval(that.timer);myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: e.dataIndex,}); //鼠标移出后先把上次的高亮取消that.timer = setInterval(function () {// 隐藏提示框myChart.dispatchAction({type: "hideTip",seriesIndex: 0,dataIndex: index,});// 显示提示框myChart.dispatchAction({type: "showTip",seriesIndex: 1,dataIndex: index + 1,});// 取消高亮指定的数据图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 13) {index = -1;}}, 2000);});// $.getJSON(areaJson, function (geoJson) {echarts.registerMap("zhejiang", areaJson);myChart.hideLoading();// var mapDate = [//   {//     name: "杭州",//     value: [120.153576, 30.287459, 399],//   },//   {//     name: "宁波",//     value: [121.549792, 29.868388, 299],//   },//   {//     name: "温州",//     value: [120.672111, 28.000575, 299],//   },//   {//     name: "嘉兴",//     value: [120.750865, 30.762653, 299],//   },//   {//     name: "湖州",//     value: [120.102398, 30.867198, 299],//   },//   {//     name: "绍兴",//     value: [120.582112, 29.997117, 299],//   },//   {//     name: "金华",//     value: [119.649506, 29.089524, 420],//   },//   {//     name: "衢州",//     value: [118.87263, 28.941708, 300],//   },//   {//     name: "舟山",//     value: [122.106863, 30.016028, 23],//   },//   {//     name: "丽水",//     value: [119.921786, 28.451993, 299],//   },//   {//     name: "台州",//     value: [121.428599, 28.661378, 299],//   },// ];const option = {// backgroundColor: "#020933",title: {text: title,subtext: "",left: titleX,top: titleY,textStyle: {color: "#fff",fontSize: titleSize,},},tooltip: {trigger: "item",formatter: function (params) {// console.log(params);return params.name + " : " + params.value[2] + unit;},// backgroundColor: "#fff",textStyle: {fontSize: tooltipSize,},},visualMap: {// min: 0,// max: 1000,right: legendRight,seriesIndex: 1,type: "piecewise",bottom: legendBottom,textStyle: {color: "#FFFF",},splitList: [{gte: 401,lte: 500,color: "#FF7500",label: "401~500",}, //大于5万人{gte: 301,lte: 400,color: "#FF7500",label: "301~400",}, //3-5万人{gte: 201,lte: 300,color: "#FFC273",label: "201~300",}, //1-3万人{lte: 200,gte: 101,color: "#FFDFB0",label: "101~200",},{lte: 100,color: "#FFFED0",label: "0~100",},],},geo: {map: "zhejiang",aspectScale: 0.75, //长宽比zoom: 1.1,roam: false,itemStyle: {normal: {areaColor: areaColor,shadowColor: areaShadowColor,shadowOffsetX: 0,shadowOffsetY: 25,},emphasis: {areaColor: areaHighColor, //"#2AB8FF"borderWidth: 0,color: "green",label: {show: false,},},},},series: [{type: "map",// roam: true,label: {normal: {show: true,textStyle: {color: "#fff",fontSize: citySize,},},emphasis: {textStyle: {color: "#fff",},},},itemStyle: {normal: {borderColor: areaBorderColor,borderWidth: 1.5,areaColor: areaColor,},emphasis: {areaColor: areaHighColor,borderWidth: 0,color: "green",},},zoom: 1.1,roam: false,map: "zhejiang", //使用// data: this.difficultData //热力图数据   不同区域 不同的底色},{type: "effectScatter",coordinateSystem: "geo",showEffectOn: "render",rippleEffect: {period: 15,scale: 5,brushType: "fill",},symbolSize: function (value) {// console.log(value[2]);let num = value[2];let size = num / rate;return size;},hoverAnimation: true,itemStyle: {normal: {color: "#ffff",// shadowBlur: 10,// shadowColor: "#333",},},data: mapDate,},],};myChart.setOption(option);// });// myChart.setOption(option);},},beforeDestroy() {clearInterval(this.timer); // 清除定时器this.timer = null;},
};
</script>
<style lang="scss" scoped>
.line-wrapper {margin: 0 auto;
}
</style>

echarts区域地图，自动高亮区域信息相关推荐

vue echarts全国地图和区域地图 map
vue echart map 全国和地区数据此案例并不是全国省市区下钻只是展示全国或省或市的echarts地图如果想看全国省市区下钻,请看此连接链接: 全国省市区下钻. 效果图如下(可通过省市区 ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
echarts地图双击区域展示下级市区县地图
效果图: 1.默认展示全国地图 2.双击江苏区域,展示江苏省地图 3.双击南京市区域,展示南京市地图操作效果: showMap.wmv 注:左上角点击返回上一级,可依次返回至上一级地图. 实现代码: ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
vue+echarts 区域地图绘制（街道）
vue+echarts 区域地图绘制(街道) 1.以下是本人参考别的博主的链接 2.需要用到的资源 3.获取地图JSON (1)[阿里云](http://datav.aliyun.com/portal ...
Echarts+高德地图，获取全国省市区，区域板块地图获取并高亮显示
当用户选择省市区之后,可以看到对应区域的高亮显示. 如图: 之前用户选择的是江苏省,因此当前高亮显示的是江苏省地图板块,如果之前用户选择的是成都市,那么地图则会变成四川省的版图,高亮显示成都市,如下图 ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦
最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同. ...

echarts区域地图，自动高亮区域信息

代码部分

echarts区域地图，自动高亮区域信息相关推荐

最新文章

热门文章