图例:
示例代码:
patientDistri5(valData, newColor) {
const option = {
tooltip: {
trigger: 'item',
textStyle: {
color: '#333',
fontSize: 14,
fontWeight: 'normal'
},
formatter: (param) => {
return `
<div style="display:flex;height:26px;line-height:26px">
<span>${param.marker}${param.name}</span></div>
<div style="display:flex;height:26px;line-height:26px;">
<span style="font-weight: 700;
margin-right:4px;text-indent:14px">${param.data.value}人</span>
<span>(${param.data.percentage})</span>
</div>`
}
},
color: newColor, //图例颜色
legend: {
icon: 'square',
orient: 'vertical',
formatter: '{a|{name}}',
right: '3%',
top: 'center',
selectedMode: false,
itemWidth: 14,
itemHeight: 14,
textStyle: {
padding: [0, 0, 0, 10],
rich: {
a: {
width: 88,
fontSize: 12,
color: '#544F4F',
borderColor: '#fff',
borderWidth: 1
}
}
}, //图例设置
itemGap: 30
},
series: [
{
name: '',
type: 'pie',
top: 20,
right: '30%',
bottom: 20,
left: '10%',
radius: ['45%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderColor: '#fff',
borderWidth: 6
normal: { //若是柱状图,设置柱状图为椭圆
barBorderRadius: 16 //
} //
},
label: {
alignTo: 'edge',
minMargin: 5,
edgeDistance: 10,
lineHeight: 25,
formatter: (item) => {
const { data } = item
return `{b|${data.name}}\n{c|${data.value}(${data.percentage})}`
},
rich: {
b: {
fontSize: 12,
color: '#544F4F'
},
c: {
fontSize: 12,
color: '#544F4F'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: (params) => {
const isLeft = params.labelRect.x < this.myChart5.getWidth() / 2,
points = params.labelLinePoints
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width
return {
labelLinePoints: points
}
}, //label线设置
data: valData
}
]
}
this.myChart5 = this.$echarts.init(this.$refs.firstRiskPic)
this.myChart5.clear()
this.myChart5.setOption(option, true)
window.addEventListener('resize', () => {
this.myChart5.resize()
})
},