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