echart地图上鼠标经过展示数据tooltip

最新推荐文章于 2024-05-06 18:26:11 发布

追丰少年

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量10w+

点赞数 2

分类专栏： Echarts 文章标签： javascript 开发语言 ecmascript

原文链接：https://blog.csdn.net/weixin_44099060/article/details/125440607?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%E5%9C%B0%E5%9B%BE%E9%BC%A0%E6%A0%87%E7%BB%8F%E8%BF%87%E6%98%BE%E7%A4%BA%E6%95%B0%E6%8D%AE&utm_medium=distribute.pc_search_result.none

版权

Echarts 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

定义一个数据集

  const dataSet = [
    {name: '鹿城区', value: [600, 22, 500]},
    {name: '永嘉县', value: [450, 82, 500]},
    {name: '洞头区', value: [121, 23, 500]},
    {name: '乐清市', value: [110, 83, 500]},
    {name: '瓯海区', value: [120, 29, 500]},
    {name: '龙湾区', value: [174, 28, 500]},
    {name: '瑞安市', value: [520, 78, 500]},
    {name: '文成县', value: [120, 78, 500]},
    {name: '平阳县', value: [160, 27, 500]},
    {name: '龙港市', value: [127, 27, 500]},
    {name: '泰顺县', value: [119, 27, 500]},
    {name: '苍南县', value: [126, 27, 500]},
  ];

在option中导入数据集，并修改展示的数据格式，formatter中可识别部分html标签

tooltip: {
  trigger: 'item',
  formatter: (data) => {
    return `<h3>${data.data.name}</h3><br /> 
            建议数：${data.data.value[0]}<br />
            参与数：${data.data.value[1]}<br />
            活动数：${data.data.value[2]}<br />`;
  },
  data: dataSet,
},