echarts地图修改scatter标签的宽度和高度无效?

记录一次问题,给series属性scatter加宽高无效。

给series加上rich属性即可。

{

        type: "scatter",

        coordinateSystem: "geo",

        data: convertData(),

        silent: true,

        showLegendSymbol: false,

        // 可以添加更多标记点

        label: {

          normal: {

            show: true,

            formatter: (params) => {

              return params.data.num;

            },

            textStyle: {

              color: "#3096ff",

              fontSize: 12,

            },

            backgroundColor: "#fff",

            shadowColor: "rgba(0,0,0,.4)",

            shadowBlur: 3,

            shadowOffsetY: 5,

            width: 16,

            height: 16,

            lineHeight:16,

            align:"center",

            borderRadius: 16,

            padding: 5,

            rich: {},   // 加上这一句就可以控制width和height了

          },

        },

        itemStyle: {

          normal: {

            color: "#F62157", // 标记点颜色

          },

        },

      },

具体的问题不知道什么是什么原因,这么改我这里就好了!

  • 8
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts地图散点图(Map Scatter)通常用于在地图上展示一些点的分布情况,如人口、销售额等数据。要绘制ECharts地图散点图,需要先准备好地图数据和散点数据。地图数据可以通过ECharts提供的地图文件或自己绘制生成,而散点数据则可以从后端获取或手动录入。 以下是一个简单的ECharts地图散点图的代码示例: ```javascript // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 配置地图参数 echarts.registerMap('world', worldMapData); // 配置散点数据 var scatterData = [ {name: 'New York', value: [100.5, 38.8, 50000]}, {name: 'London', value: [-0.1, 51.5, 30000]}, {name: 'Tokyo', value: [139.7, 35.7, 40000]}, // ... ]; // 配置散点图参数 var option = { tooltip: { trigger: 'item', formatter: '{b}' }, geo: { map: 'world' }, series: [{ type: 'scatter', coordinateSystem: 'geo', data: scatterData, symbolSize: function (val) { return val[2] / 1000; }, label: { formatter: '{b}', position: 'right', show: true }, itemStyle: { color: 'red' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 在上面的代码中,我们先初始化了一个ECharts实例,并注册了一个名为world的地图。然后,我们配置了一个散点数据数组scatterData,其中每一项包含了点的名称(name)、经纬度坐标(value)和点的大小(即数据值)。最后,我们配置了一个散点图的参数option,其中设置了散点图的坐标系(coordinateSystem)、数据(data)、点的大小(symbolSize)、标签(label)和样式(itemStyle)。最后,我们使用setOption方法将配置项和数据应用到ECharts实例中,并显示出了地图散点图。 需要注意的是,ECharts地图散点图的数据格式有一定的要求,具体可以参考ECharts官网的文档。同时,我们也可以根据具体的需求对散点图的参数进行更详细的配置,以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值