欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts 在地图上显示数值

程序员文章站 2022-05-27 16:09:24
...

预期效果

echarts 在地图上显示数值

代码配置

series: [{
    name: '',
     type: 'map',
     mapType: 'china',
     roam: false, 
     itemStyle: {
         normal: {
             label: {
                 show: true,
                 formatter:'{b}\n{c}',
             },
             borderWidth:0
         },
         emphasis: {
             label: {
                 show: false
             },
             areaColor:'rgb(213, 214, 79)',
         }
     },
     top: "10%", //组件距离容器的距离
     data: [{
         name: '北京',
         value: Math.round(Math.random() * 1000),
     }, {
         name: '天津',
         value: Math.round(Math.random() * 500)
     }, {
         name: '上海',
         value: Math.round(Math.random() * 1500)
     },...]

通过配置label中的formatter来设置地图上显示文字
{a} — series的name值
{b} — 数据项的name值
{c} — 数据项的value值

相关标签: echarts label