问题所在
解决方案
label: {
show: true,
fontSize: "12",
//通过slice方法设置超过4个字就换行展示
normal: {
formatter(v) {
let text = v.name;
return text.length < 4 ?
text :
`${
text.slice(0, 4)}\n${
text.slice(4)}`;
},
},
},
核心代码
把这个方法写在label配置项里面，再把label配置项嵌套在series配置项里面。
//通过slice方法设置超过4个字就换行展示
normal: {
formatter(v) {
let text = v.name;
return text.length < 4 ?
text :
`${
text.slice(0, 4)}\n${
text.slice(4)}`;
},
},
完整代码
<template>
<div>
<div id="pieFullChart" :style="{ width: '360px', height: '300px' }"></div>
</div>
</template>
<script>
// 引入接口文件
import {
getNonConfAnalysis
} from '@api/lookTaskManagement'
const chartsCookie = [] //将数据push到这个空数组中
export default {
data() {
return {
cookie: [], //饼状图数据
}
},
mounted() {
this.pieFullChart() //图表方法
this.getNonConfAnalysis() //声明一个方法用来接口调用
},
methods: {
//调用mounted中的getNonConfAnalysis方法
getNonConfAnalysis() {
//后端需要的参数
let data = {
vin: this.vin,
sfazobd: this.sfazobd
}
//请求接口
getNonConfAnalysis(data).then(res => {
console.log(res.data, "车辆监测/检测不合规情况分析")
//将数据赋值给data中定义的cookie
this.cookie = res.data
//一定要调用图表方法
this.pieFullChart()
})
},
pieFullChart() {
// 获取id并初始化图表
let pieFullChart = document.getElementById("pieFullChart");
let myChartTwo = this.$echarts.init(pieFullChart);
// 配置项
let option = {
tooltip: {
trigger: "item",
},
legend: {
left: "center",
top: "2%",
},
series: [{
center: ["50%", "46%"], //a调整图像的位置
type: "pie",
label: {
show: true,
fontSize: "12",
//通过slice方法设置超过4个字就换行展示
normal: {
formatter(v) {
let text = v.name;
return text.length < 4 ?
text :
`${
text.slice(0, 4)}\n${
text.slice(4)}`;
},
},
},
radius: ["0%", "58%"],
avoidLabelOverlap: false,
labelLine: {
show: false,
},
//通过map方法循环遍历拿取data的数据并赋值
data: this.cookie.map(item => {
return {
value: item.value,
name: item.name
}
}),
}],
}
myChartTwo.setOption(option)
const chartObj = {
name: 'week',
value: myChartTwo
}
// 将数据添加到最上面定义chartsCookie数组中
chartsCookie.push(chartObj)
},
}
}
</script>
