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

上一篇:echarts setoption组件作用


下一篇:aaa