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

1. 饼图位置确定不能由grid来设置，需要使用center和radius要设置；

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|'+p.percent+'%}'
					].join('\n')
		},
// 如果不需要判断name长度可以直接使用formatter: '{name|{b}}\n{value|{c}}单\n{percent|{d} %}',
rich: {
		name: {
			color: "#333333"
		},
		percent: {
			fontSize: 10,
			color: '#999'
		}
	}

3. 当数据刷新后部分图表数据可能存在没刷新的情况

setOption有3个属性，setOption(option,notMerge,lazyUpdate);

第二个notMerge默认为false,即默认合并两个数据

解决方法：myChart.setOption(newValue, true)

4. 在手机端柱状图最左边数据的tooltip会超出屏幕显示

解决：

tooltip: {
	trigger: 'axis',
	confine :true
}

5. 对于未知个数的图表渲染，不知道初始化多少个，可以使用插件，地址：https://ext.dcloud.net.cn/plugin?id=3333

标签：name,遇到,换行,汇总,setOption,percent,value,formatter,echarts
来源： https://blog.csdn.net/qq_42597536/article/details/113998576