echarts中geo类型地图设置tooltip无效

发布于 2022-09-12 23:30:40 字数 5212 浏览 17 评论 0

鼠标移到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>

image.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

风月客 2022-09-19 23:30:40

升级echarts到5.1.1解决

image.png

北城半夏 2022-09-19 23:30:40

copy下了没跑起来,建议https://codepen.io/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文