echarts 2D地图散点图(带立体效果)tooltips中点击事件

模板

<template><div class="wrapper"><div class="chart" id="chart"></div><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template>

1 、2d地图是平面的，可以设置倾斜度，边加阴影，这样就有立体感了

2 、tooltips上设置点击事件，在methods不会触发的，要先在全局下挂载

<script>
import shanghai from "../../static/map/js/province/shanghai";
// params 当前tooltip数据，
window.onClickSeries = function(params, key) {testFun(params, key); // 直接通过window方法去调用methods中对应方法console.log(params);
};export default {data() {return {dialogVisible: false,city: "",dataS: [{ name: `浦东新区`, value: [121.567706, 31.245944, 1] },{ name: `宝山区`, value: [121.489934, 31.398896, 2] },{ name: `崇明区`, value: [121.526, 31.658, 3] },{ name: `嘉定区`, value: [121.250333, 31.383524, 4] },{ name: `青浦区`, value: [121.113021, 31.151209, 5] },{ name: `杨浦区`, value: [121.522797, 31.270755, 6] },{ name: `虹口区`, value: [121.491832, 31.26097, 7] },{ name: `普陀区`, value: [121.392499, 31.241701, 8] },{ name: `静安区`, value: [121.448224, 31.229003, 9] },{ name: `黄浦区`, value: [121.490317, 31.222771, 10] },{ name: `长宁区`, value: [121.4222, 31.218123, 11] },{ name: `徐汇区`, value: [121.43752, 31.179973, 12] },{ name: `松江区`, value: [121.223543, 31.03047, 13] },{ name: `闵行区`, value: [121.375972, 31.111658, 14] },{ name: `金山区`, value: [121.458472, 30.912345, 15] },{ name: `奉贤区`, value: [121.458472, 30.912345, 16] }]};},created() {},mounted() {this.drawChart();window.testFun = this.testFun;},methods: {// vue内部方法testFun(va1, va2) {console.log(va1, va2);this.dialogVisible = true;},// 弹框handleClose(done) {this.$confirm("确认关闭？").then(_ => {done();}).catch(_ => {});},drawChart() {// 基于准备好的dom，初始化echarts实例let chart = this.$echarts.init(document.getElementById("chart"));// 监听屏幕变化自动缩放图表window.addEventListener("resize", function() {chart.resize();});// 绘制图表chart.setOption({// 图表主标题title: {text: "全国各省人口", // 主标题文本，支持使用 \n 换行top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比left: "center", // 值: 'left', 'center', 'right' 同上textStyle: {// 文本样式fontSize: 24,fontWeight: 600,color: "#fff"}},// 提示框组件tooltip: {trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式// 使用函数模板  传入的数据值 -> value: number | ArraytriggerOn: "click",enterable: true,formatter: function(val) {console.log(val);let valu = val.data.value;return (val.data.name +"<br>人口数量: " +val.data.value[2] +"万" +`<button  onclick="onClickSeries(\'` +valu +`\',\' ` +1 +`\')">这是显示的文本</button>`);}},geo: {zoom: 1,// geoIndex: 1,aspectScale: 1, //长宽比map: "上海", // 地图类型show: true, // 是否显示地理坐标系组件// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，// 可以设置成 'scale' 或者 'move' 设置成 true 为都开启roam: false,// 图形上的文本标签label: {show: false // 是否显示对应地名},// 地图区域的多边形 图形样式itemStyle: {normal: {areaColor: "#053fc4", // 地图颜色borderWidth: 5, // 边框的宽度shadowColor: "#0098d9", //  阴影颜色borderColor: "#00FFFF", // 边框颜色// shadowOffsetX: -5,// shadowOffsetY: 10,shadowBlur: 12, // 阴影的模糊大小shadowOffsetX: 0, //阴影水平方向上的偏移距离shadowOffsetY: 12 // 阴影垂直方向上的偏移距离},emphasis: {show: false}},// 高亮状态下的多边形和标签样式emphasis: {label: {show: true, // 是否显示标签color: "#fff" // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色},itemStyle: {areaColor: "#9cc3f5" // 地图区域的颜色}}},series: [{type: "map",map: "上海",// center: [112.194115019531, 23.582111640625],zoom: 1,geoIndex: 1,aspectScale: 1, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true,textStyle: {fontSize: 8,color: "#ccc"}},emphasis: {show: false,textStyle: {color: "#ccc"}}},roam: false,itemStyle: {normal: {areaColor: "#053fc4",borderColor: "#fff",fontWeightL: 700,borderWidth: 1},emphasis: {areaColor: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "#3f15d6" // 0% 处的颜色},{offset: 1,color: "#d243cd" // 100% 处的颜色}],globalCoord: false // 缺省为 false}}},data: this.dataS},{type: "scatter", // 类型coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',// 'pin', 'arrow', 'none'symbol: "circle",symbolSize: 8, // 标记的大小// 图形的样式itemStyle: {normal: {// areaColor: '#00FFFF', // 地图颜色borderWidth: 1, // 边框的宽度shadowColor: "#0098d9", //  阴影颜色borderColor: "#00FFFF", // 边框颜色// shadowOffsetX: -5,// shadowOffsetY: 10,shadowBlur: 12, // 阴影的模糊大小shadowOffsetX: 0, //阴影水平方向上的偏移距离shadowOffsetY: 12 // 阴影垂直方向上的偏移距离},emphasis: {show: false}},// 系列中的数据内容数组, 数组项通常为具体的数据项data: this.dataS},{type: "effectScatter", // 类型coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',// 'pin', 'arrow', 'none'symbol: "circle",// 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数// (value: Array|number, params: Object) => number|Array// 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数symbolSize: function(val) {return val[2] / 600;},// 图形的样式itemStyle: {normal: {// areaColor: '#00FFFF', // 地图颜色borderWidth: 1, // 边框的宽度shadowColor: "#0098d9", //  阴影颜色borderColor: "#00FFFF", // 边框颜色// shadowOffsetX: -5,// shadowOffsetY: 10,shadowBlur: 12, // 阴影的模糊大小shadowOffsetX: 0, //阴影水平方向上的偏移距离shadowOffsetY: 12 // 阴影垂直方向上的偏移距离},emphasis: {show: false}},// 系列中的数据内容数组。数组项通常为具体的数据项data: [{ name: `长宁区`, value: [121.4222, 31.218123, 11] },{ name: `徐汇区`, value: [121.43752, 31.179973, 12] },{ name: `松江区`, value: [121.223543, 31.03047, 13] },{ name: `闵行区`, value: [121.375972, 31.111658, 14] },{ name: `金山区`, value: [121.458472, 30.912345, 15] },{ name: `奉贤区`, value: [121.458472, 30.912345, 16] }]}]});}}
};
</script>

样式

<style scoped>
.wrapper {width: 100%;
}
.wrapper .chart {width: 800px;height: 500px;margin: 100px 50px 0;border: 1px solid #eeeeee;background-size: 100% 100%;
}
#chart {pointer-events: all;
}
</style>

下面是完整代码

<el-dialog

title="提示"

:visible.sync="dialogVisible"

width="30%"

:before-close="handleClose"

<span>这是一段信息</span>

<el-button @click="dialogVisible = false">取消</el-button>

<el-button type="primary" @click="dialogVisible = false"

>确定</el-button

</span>

</el-dialog>

</div>

</template>

import shanghai from "../../static/map/js/province/shanghai";

// 用来保存所有的地图实例

const globalMap = {};

// params 当前tooltip数据， key: 当前实例的键值

window.onClickSeries = function(params, key) {

testFun(params, key); // 直接通过window方法去调用methods中对应方法

// 获取当前id地图的回调方法并执行

console.log(params);

};

export default {

data() {

return {

dialogVisible: false,

city: "",

dataS: [

{ name: `浦东新区`, value: [121.567706, 31.245944, 1] },

{ name: `宝山区`, value: [121.489934, 31.398896, 2] },

{ name: `崇明区`, value: [121.526, 31.658, 3] },

{ name: `嘉定区`, value: [121.250333, 31.383524, 4] },

{ name: `青浦区`, value: [121.113021, 31.151209, 5] },

{ name: `杨浦区`, value: [121.522797, 31.270755, 6] },

{ name: `虹口区`, value: [121.491832, 31.26097, 7] },

{ name: `普陀区`, value: [121.392499, 31.241701, 8] },

{ name: `静安区`, value: [121.448224, 31.229003, 9] },

{ name: `黄浦区`, value: [121.490317, 31.222771, 10] },

{ name: `长宁区`, value: [121.4222, 31.218123, 11] },

{ name: `徐汇区`, value: [121.43752, 31.179973, 12] },

{ name: `松江区`, value: [121.223543, 31.03047, 13] },

{ name: `闵行区`, value: [121.375972, 31.111658, 14] },

{ name: `金山区`, value: [121.458472, 30.912345, 15] },

{ name: `奉贤区`, value: [121.458472, 30.912345, 16] }

]

};

created() {},

mounted() {

this.drawChart();

window.testFun = this.testFun;

methods: {

// vue内部方法

testFun(va1, va2) {

console.log(va1, va2);

this.dialogVisible = true;

// 弹框

handleClose(done) {

this.$confirm("确认关闭？")

.then(_ => {

done();

})

.catch(_ => {});

drawChart() {

// 基于准备好的dom，初始化echarts实例

let chart = this.$echarts.init(document.getElementById("chart"));

// 监听屏幕变化自动缩放图表

window.addEventListener("resize", function() {

chart.resize();

});

// 绘制图表

chart.setOption({

// 图表主标题

title: {

text: "全国各省人口", // 主标题文本，支持使用 \n 换行

top: 20, // 定位值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比

left: "center", // 值: 'left', 'center', 'right' 同上

textStyle: {

// 文本样式

fontSize: 24,

fontWeight: 600,

color: "#fff"

}

// 提示框组件

tooltip: {

trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用

// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式

// 使用函数模板传入的数据值 -> value: number | Array

triggerOn: "click",

enterable: true,

formatter: function(val) {

console.log(val);

let valu = val.data.value;

return (

val.data.name +

"<br>人口数量: " +

val.data.value[2] +

"万" +

`<button οnclick="onClickSeries(\'` +

valu +

`\',\' ` +

1 +

`\')">这是显示的文本</button>`

);

}

geo: {

zoom: 1,

// geoIndex: 1,

aspectScale: 1, //长宽比

map: "上海", // 地图类型

show: true, // 是否显示地理坐标系组件

// 是否开启鼠标缩放和平移漫游默认不开启如果只想要开启缩放或者平移，

// 可以设置成 'scale' 或者 'move' 设置成 true 为都开启

roam: false,

// 图形上的文本标签

label: {

show: false // 是否显示对应地名

// 地图区域的多边形图形样式

itemStyle: {

normal: {

areaColor: "#053fc4", // 地图颜色

borderWidth: 5, // 边框的宽度

shadowColor: "#0098d9", // 阴影颜色

borderColor: "#00FFFF", // 边框颜色

// shadowOffsetX: -5,

// shadowOffsetY: 10,

shadowBlur: 12, // 阴影的模糊大小

shadowOffsetX: 0, //阴影水平方向上的偏移距离

shadowOffsetY: 12 // 阴影垂直方向上的偏移距离

emphasis: {

show: false

}

// 高亮状态下的多边形和标签样式

emphasis: {

label: {

show: true, // 是否显示标签

color: "#fff" // 文字的颜色如果设置为 'auto'，则为视觉映射得到的颜色，如系列色

itemStyle: {

areaColor: "#9cc3f5" // 地图区域的颜色

}

series: [

{

type: "map",

map: "上海",

// center: [112.194115019531, 23.582111640625],

zoom: 1,

geoIndex: 1,

aspectScale: 1, //长宽比

showLegendSymbol: false, // 存在legend时显示

label: {

normal: {

show: true,

textStyle: {

fontSize: 8,

color: "#ccc"

}

emphasis: {

show: false,

textStyle: {

color: "#ccc"

}

roam: false,

itemStyle: {

normal: {

areaColor: "#053fc4",

borderColor: "#fff",

fontWeightL: 700,

borderWidth: 1

emphasis: {

areaColor: {

type: "linear",

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: "#3f15d6" // 0% 处的颜色

{

offset: 1,

color: "#d243cd" // 100% 处的颜色

}

globalCoord: false // 缺省为 false

}

data: this.dataS

{

type: "scatter", // 类型

coordinateSystem: "geo", // 该系列使用的坐标系可选: 'cartesian2d','polar','geo'

// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',

// 'pin', 'arrow', 'none'

symbol: "circle",

symbolSize: 8, // 标记的大小

// 图形的样式

itemStyle: {

normal: {

// areaColor: '#00FFFF', // 地图颜色

borderWidth: 1, // 边框的宽度

shadowColor: "#0098d9", // 阴影颜色

borderColor: "#00FFFF", // 边框颜色

// shadowOffsetX: -5,

// shadowOffsetY: 10,

shadowBlur: 12, // 阴影的模糊大小

shadowOffsetX: 0, //阴影水平方向上的偏移距离

shadowOffsetY: 12 // 阴影垂直方向上的偏移距离

emphasis: {

show: false

}

// 系列中的数据内容数组, 数组项通常为具体的数据项

data: this.dataS

{

type: "effectScatter", // 类型

coordinateSystem: "geo", // 该系列使用的坐标系可选: 'cartesian2d','polar','geo'

// 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',

// 'pin', 'arrow', 'none'

symbol: "circle",

// 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数

// (value: Array|number, params: Object) => number|Array

// 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数

symbolSize: function(val) {

return val[2] / 600;

// 图形的样式

itemStyle: {

normal: {

// areaColor: '#00FFFF', // 地图颜色

borderWidth: 1, // 边框的宽度

shadowColor: "#0098d9", // 阴影颜色

borderColor: "#00FFFF", // 边框颜色

// shadowOffsetX: -5,

// shadowOffsetY: 10,

shadowBlur: 12, // 阴影的模糊大小

shadowOffsetX: 0, //阴影水平方向上的偏移距离

shadowOffsetY: 12 // 阴影垂直方向上的偏移距离

emphasis: {

show: false

}

// 系列中的数据内容数组。数组项通常为具体的数据项

data: [

{ name: `长宁区`, value: [121.4222, 31.218123, 11] },

{ name: `徐汇区`, value: [121.43752, 31.179973, 12] },

{ name: `松江区`, value: [121.223543, 31.03047, 13] },

{ name: `闵行区`, value: [121.375972, 31.111658, 14] },

{ name: `金山区`, value: [121.458472, 30.912345, 15] },

{ name: `奉贤区`, value: [121.458472, 30.912345, 16] }

]

}

]

});

}

};

</script>

.wrapper {

width: 100%;

}

.wrapper .chart {

width: 800px;

height: 500px;

margin: 100px 50px 0;

border: 1px solid #eeeeee;

/* background: url(../../public/static/bg.png) no-repeat; */

background-size: 100% 100%;

}

#chart {

pointer-events: all;

}

</style>

echarts 2D地图散点图(带立体效果)tooltips中点击事件相关推荐

ECharts 实现地图散点图上（转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
echarts 2D地图3D效果（附：山东省市地图——济南莱芜合并）
应客户需求,必须用2D地图做出3D效果样式(地图色块渐变色后续维护).本菜翻遍echarts官方文档以及网上的各种资料,做出了自己的整合.为了防止下次踩坑,故整理此篇文章与各位看客老爷共勉.废话不多说 ...
柱状图带立体效果_PS教程！手把手教你打造立体感欧美风人像大片效果（已打包好素材资料见文末）...
在PS的众多技法中,磨皮教程种类繁多.本期教给大家的方法完全可以保留原片的细节和质感,既可以修掉面部不需要的瑕疵,又可以在保留皮肤质感的基础上,打造画面的立体感,而不是把人物的皮肤处理得如同镜面一般光 ...
echarts中地图与表格联动效果
echarts中地图与表格数据联动,当鼠标在地图上滑入某个区域时,不仅地图中该区域高亮显示,数据表格中的该条数据也会高亮显示.另外当鼠标移入表格中的某条数据时,地图中想对应的区域会自动高亮提示. 鼠标 ...
echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来先注册地图 import * as echarts from 'echarts'; import { d ...
echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map var data = [{name: '郑州',v ...
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解
这里写目录标题 1.实例 2.案例详解 1.实例这次我拿echarts中地图组合散点图的实例 !!!实现效果:滑到散点显示不同于地图块的信息及 formatter 提示窗自定义!!! 这个显示项 ...
echarts中国地图使省份选择性滑动或点击高亮
本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选.并且对省份进行选择性交互. 首先我们需要一个颜色集合,代表我们要设置多少种颜色.这里用到了dataRange. dataRange: ...
Android学习笔记（三）——Button之圆角、按压效果、点击事件
自定义背景形状圆角按钮在drawabale 中new一个drawable resource file: 将root element设置为shape,命名为button_2: 在button_2 x ...

echarts 2D地图散点图(带立体效果)tooltips中点击事件

echarts 2D地图散点图(带立体效果)tooltips中点击事件相关推荐

最新文章

热门文章