echarts使用过程中遇到的小问题汇总

这篇博客总结了在使用Echarts过程中遇到的问题及其解决办法,包括饼图位置设置、legend显示、数据刷新不完全、移动端图表显示、动态渲染图表、数据区域缩放以及饼图标签样式调整等。通过这些技巧,可以更好地优化Echarts图表的展示效果。
摘要由CSDN通过智能技术生成

1. 饼图位置确定不能由grid来设置,需要使用center和radius要设置;(另外,如果想默认包含标签,直接设置containLabel: true,不用设置上下左右的边距)

2. legend过长超出范围时设置显示方式:

方式1:

官网给出的方案:label{overflow:"none"}

文字超出宽度是否截断或者换行。配置width时有效

  • 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为...
  • 'break' 换行
  • 'breakAll' 换行,跟'break'不同的是,在英语等拉丁文中,'breakAll'还会强制单词内换行
    (但是我的玫瑰图配置后无法生效,采用自己设置的方法)

方式2:

设置formatter,此方法可以配合rich使用,很方便

formatter: function(p) {
		let name = p.name.length>6?p.name.substr(0,6)+"...":p.name
			return [
					'{name|'+name+'}',
					'{value|'+p.value+'}单',
					'{percent|&#
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值