uniapp开发app使用echarts的时候发现一个问题,饼图lable文字过长,会出现超出屏幕的问题,而使用formatter自定义函数H5端可以而app端则不会换行而是出现省略号,搞了半天发现,data中option下的formatter方法在randerjs初始化的时候被干掉了,真的坑。
<script>
export default {
props:['dateInfo'],
data() {
return {
option: {
title: {},
legend: { show: false },
series: [
{
name: '姓名',
type: 'pie',
radius: '55%',
minAngle:30,
center: ['50%', '50%'],
label: {
normal: {
textStyle: {
fontWeight: 'normal',
fontSize: 12,
color: '#666'
}
}
},
data: [
{name:'',value:''}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
},
mounted() {
this.getPartInfo1()
},
watch:{
dateInfo(newVal,oldVal){
console.log(newVal)
this.getPartInfo1()
}
},
methods: {
async getPartInfo1(){
try{
let res = await this.$api.anaApi.getInspectionDatasByType({
load: true,
orgid:'',
startDate:this.dateInfo.startTime,
endDate:this.dateInfo.startTimeEnd
});
if (res) {
this.option.series[0].data = res.data.data
}
}catch(e){
}
},
}
};
</script>
setOption之前先加上formatter方法
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
this.option.series[0].label.normal.formatter = function formatter(v) {
let text = v.name;
let value_format = v.value + '%';
if (text.length <= 6) {
return `${text}\n${value_format}`;
} else if (text.length > 6 && text.length <= 12) {
return text = `${text.slice(0, 6)}\n${text.slice(6)}\n${value_format}`
} else if (text.length > 12 && text.length <= 18) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}\n${value_format}`
} else if (text.length > 18 && text.length <= 24) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}\n${value_format}`
} else if (text.length > 24 && text.length <= 30) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}\n${value_format}`
} else if (text.length > 30) {
return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}\n${value_format}`
}
}
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
myChart.setOption(newValue)
}
}
}
</script>