echarts怎么修改map图例字体的颜色 echarts visualmap pieces

3 篇文章 0 订阅

如果在饼形图我们可以用legend来设置

legend: {
                    left: 'center',
                    textStyle:{
                            fontSize: 18,//字体大小
                            color: '#ffffff'//字体颜色
                          },
                  },

但是我们想改变visualmap pieces图例的字体颜色用上面的方法一直没有效果

在这里我们在pieces里加上textStyle属性就好了

pieces: [ // 自定义『分段式视觉映射组件(visualMapPiecewise)』
的每一段的范围,以及每一段的文字,以及每一段的特别的样式
        {gt: 900, lte: 1000, label: '非常好', color: '#6ad86e'}, // (900, 1000]
        {gt: 500, lte: 900, label: '正常', color: '#9adcfa'}, // (500, 900]
        {gt: 310, lte: 500, label: '警告', color: '#ffeb3b'}, // (310, 500]
        {gt: 200, lte: 300, label: '较差', color: '#ff9800'}, // (200, 300]
        {gt: 10, lte: 200, label: '非常差', color: 'orangered'}, // (10, 200]
        {value: 0, label: '无数据', color: '#999'} // [0]
        ],
          //设置字体颜色
        textStyle: {
           color: '#ffffff'
        },

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
ECharts是一款功能强大的可视化图表库,可以通过设置图例颜色和地图底色来实现个性化定制。 首先,设置图例颜色可以通过以下步骤实现: 1. 在ECharts的option配置项中,找到legend(图例)的属性。 2. 在legend属性中,找到data属性,这里会列出所有图例的名称。 3. 在data属性中,可以为每个图例设置具体的样式,包括颜色。 4. 为每个图例设置颜色的方法是,使用itemStyle属性来设置。示例如下: legend: { data: ['图例一', '图例二', '图例三'], itemStyle: { color: '#FF0000' // 设置图例颜色为红色 } } 这样就可以实现为指定图例设置颜色的效果。可以根据需要自定义更多的图例样式。 其次,设置地图底色可以通过以下步骤实现: 1. 在ECharts的option配置项中,找到geo(地理坐标系组件)的属性。 2. 在geo属性中,找到map属性,并设置要展示的地图类型。 3. 可以通过设置backgroundColor属性来设置地图的底色。示例如下: geo: { map: 'china', roam: true, backgroundColor: '#F0F0F0' // 设置地图的底色为灰色 } 这样就可以实现指定地图的底色。可以根据需要选择合适的颜色。 总结:使用ECharts设置图例颜色和地图底色可以通过在配置项中找到对应的属性,然后设置颜色值来实现个性化定制。通过调整相应属性的值,可以满足不同需求的图例颜色和地图底色设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Z_Xshan

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值