记得给容器宽高
html
<div id="leftChartguawang" style="height: 28vh"></div>
配置函数
javascript
const leftChartguawang = () => {
const chartBox = echarts.init(document.getElementById('leftChartguawang'))
let datas = [
[
{ name: '居民节能建筑', value: 20 },
{ name: '居民非节能建筑', value: 20 },
{ name: '非居民节能建筑', value: 30 },
{ name: '非居民非节能建筑', value: 30 }
]
]
const option = {
title: {
text: '挂网总面积\n \n422.61(万㎡)',
left: 'center',
top: '40%',
textStyle: {
color: '#999',
fontWeight: 'normal',
fontSize: 14
}
},
series: datas.map(function (data, idx) {
var top = idx * 50
return {
type: 'pie',
radius: [60, 100],
top: top + '%',
height: '100%',
left: 'center',
width: 500,
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} %}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params: any) {
const isLeft = params.labelRect.x < chartBox.getWidth() / 2
const points = params.labelLinePoints
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
return {
labelLinePoints: points
}
},
data: data
}
})
}
option && chartBox.setOption(option)
window.addEventListener('resize', function () {
chartBox.resize()
})
}
leftChartguawang()