模板
这是一段信息
js
1 、2d地图是平面的,可以设置倾斜度,边加阴影,这样就有立体感了
2 、tooltips上设置点击事件,在methods不会触发的,要先在全局下挂载
样式
下面是完整代码
title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > 这是一段信息 >确 定 >
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 +
"
人口数量: " +
val.data.value[2] +
"万" +
``
);
}
},
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] }
]
}
]
});
}
}
};
.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;
}