<div style="width: 600px;height: 500px;background-color: #fff;"></div>
drawLine(data) {
this.myChart = this.$echarts.init(document.getElementById("myChart"));
let lejibaoxiuTotals = 140;
let listSummary=[
{name:'华为1',value:10},
{name:'华为2',value:10},
{name:'华为3',value:10},
{name:'华为4',value:10},
{name:'华为5',value:10},
{name:'华为6',value:10},
{name:'华为7',value:10},
{name:'华为8',value:10},
{name:'华为9',value:10},
{name:'华为10',value:10},
{name:'华为12',value:10},
{name:'华1为13',value:10},
{name:'012华3为',value:10},
{name:'华1为2',value:10},
]
this.myChart.setOption({
backgroundColor: "#fff",
tooltip: {
trigger: 'item',
},
legend: {
type: 'scroll',
orient: 'vertical',
top: 'center',
bottom: 40,
right: 40,
icon: 'circle',
itemGap: 18,
itemWidth: 8,
itemHeight: 8,
pageButtonItemGap: 5,
textStyle: {
fontSize: 13,
color: '#D9D9D9',
rich: {
name: {
color: '#595959',
width: 77,
padding: [0, 0, 0, 0],
},
val: {
width: 50,
color: '#8c8c8c',
padding: [0, 10, 0, 6],
},
numNum: {
color: '#8c8c8c',
},
},
},
// 控制legend的间距
padding: [10, 0, 20, 20],
// 这里设置箭头的路径
pageIcons: {
vertical: [
'path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z',
'path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z',
],
},
pageButtonPosition: 'end', // 翻页的位置。'start':控制块在左或上,end控制块在右或下。
pageIconColor: '#29bca8', // 可以点击的翻页按钮颜色
pageIconInactiveColor: '#7f7f7f', // 禁用的按钮颜色
pageIconSize: 14, //这当然就是按钮的大小
formatter: function(name) {
let showNum
let percentage
for (var i = 0; i < listSummary.length; i++) {
if (listSummary[i].name == name) {
showNum = listSummary[i].value
if (lejibaoxiuTotals) {
// 计算百分比
percentage =((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + '%'
} else {
percentage = ''
}
}
}
return `{name| ${name.length > 5 ? name.slice(0, 5) + '...' : name}} | {val| ${percentage}} {numNum| ${showNum}}`
},
},
series: [{
type: 'pie',
// 饼粗的大小
radius: ['44%', '60%'],
// 图形展示的位置
center: ['30%', 'center'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
// emphasis 不展示中间的文字
labelLine: {
show: false,
},
data: listSummary, //[{name:'xx',value:'x'}]
}, ],
title: {
text: lejibaoxiuTotals ? lejibaoxiuTotals : '', //展示的总数据
left: '27%',
top: '47%',
textStyle: {
color: '#031f2d',
fontSize: 20,
align: 'center',
},
},
});
},