当前位置：首页 >

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

发布时间：2024/3/13 66 豆豆

生活随笔收集整理的这篇文章主要介绍了 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不会触发的，要先在全局下挂载

样式

下面是完整代码

<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中点击事件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： FPGA基础设计（10）Verilog行
下一篇：计算机专业怎么选择笔记本,选错一次，后悔