echarts中geo类型地图设置tooltip无效
鼠标移到effectScatter系列时正常应该有tooltip显示的,echarts版本为5.1,完整代码如下
<template>
<div ref="content" style="width:100vw;height:100vh;"></div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
name: "EchartsTest",
mounted() {
// var myecharts = echarts.init(this.$refs.content);
axios.get("https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json").then((res) => {
console.log(res);
echarts.registerMap("china", res.data);
var chart = echarts.init(this.$refs.content);
chart.setOption({
backgroundColor: "#080a20",
title: {
left: "left",
textStyle: {
color: "#fff",
},
},
tooltip: {
// trigger: "item",
},
legend: {
orient: "vertical",
top: "bottom",
left: "right",
data: ["北京 Top10", "上海 Top10", "广州 Top10"],
textStyle: {
color: "#fff",
},
selectedMode: "single",
},
geo: {
map: "china",
zoom: 1.2,
label: {
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
normal: {
areaColor: "#142957",
borderColor: "#0692a4",
},
emphasis: {
areaColor: "#0b1c2d",
},
},
},
series: [
{
name: "新乡 Top10",
type: "lines",
zlevel: 1,
effect: { show: true, period: 6, trailLength: 0.7, color: "#fff", symbolSize: 3, symbol: "circle" },
data: [
{
coords: [
[116.402217, 35.311657],
[111.4124, 40.4901],
],
lineStyle: { normal: { color: "#3ed4ff", width: 0, curveness: 0.2 } },
},
{
coords: [
[116.402217, 35.311657],
[127.9688, 45.368],
],
lineStyle: { normal: { color: "#3ed4ff", width: 0, curveness: 0.2 } },
},
],
},
{
name: "新乡 Top10",
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol:
"path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705",
symbolSize: 15,
},
data: [
{
coords: [
[116.402217, 35.311657],
[111.4124, 40.4901],
],
lineStyle: { normal: { color: "#3ed4ff", width: 1, opacity: 0.4, curveness: 0.2 } },
},
{
coords: [
[116.402217, 35.311657],
[127.9688, 45.368],
],
lineStyle: { normal: { color: "#3ed4ff", width: 1, opacity: 0.4, curveness: 0.2 } },
},
],
},
{
name: "新乡 Top10",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: { brushType: "stroke" },
label: { normal: { show: true, position: "right", formatter: "{b}" } },
itemStyle: { normal: { color: "#3ed4ff" } },
data: [
{ name: "新乡", value: [116.402217, 35.311657, 200] },
{ name: "呼和浩特", value: [111.4124, 40.4901, 90] },
{ name: "哈尔滨", value: [127.9688, 45.368, 90] },
{ name: "石家庄", value: [114.4995, 38.1006, 90] },
{ name: "昆明", value: [102.9199, 25.4663, 30] },
{ name: "北京", value: [116.4551, 40.2539, 100] },
{ name: "长春", value: [125.8154, 44.2584, 40] },
{ name: "重庆", value: [107.7539, 30.1904, 40] },
{ name: "贵阳", value: [106.6992, 26.7682, 50] },
{ name: "南宁", value: [108.479, 23.1152, 30] },
{ name: "济南", value: [117.1582, 36.8701, 10] },
{ name: "太原", value: [112.3352, 37.9413, 40] },
{ name: "西安", value: [109.1162, 34.2004, 60] },
{ name: "武汉", value: [114.3896, 30.6628, 50] },
{ name: "合肥", value: [117.29, 32.0581, 40] },
{ name: "南京", value: [118.8062, 31.9208, 30] },
{ name: "沈阳", value: [123.1238, 42.1216, 20] },
{ name: "成都", value: [103.9526, 30.7617, 10] },
],
symbolSize: function(val) {
console.log(val);
return val[2] / 10;
},
},
],
});
});
},
};
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
升级echarts到5.1.1解决
copy下了没跑起来,建议https://codepen.io/