drawLine () {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var colors = ['rgba(62, 131, 246, 1)',
'rgba(255, 196, 81, 1)',
'#0AE5FF',
'#06BCFF',
'#3EF6C4',
'#F1DA1A',
'#807BFF']
var option = {
color: colors,
legend: {
orient: 'horizontal',
bottom: 0,
right: 'center',
itemGap: 10,
itemWidth: 10,
itemHeight: 6,
width: '100%',
textStyle: {
color: '#fff',
fontSize: FontChart(12)
},
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '景区消费',
type: 'pie',
radius: ['60%', '70%'],
center: ['50%', '45%'],
minShowLabelAngle: 0,
label: {
normal: {
show: false,
position: 'center',
fontSize: FontChart(14),
color: 'auto',
formatter: (params) => {
return params.value + '\n' + params.name
},
},
emphasis: {
show: true,
position: 'center',
fontSize: FontChart(14),
color: 'auto',
formatter: function (value, index) {
console.log(value)
return '{label|' + value.percent + '%}\n'
+ '{value|' + value.name + '}'
},
rich: {
label: {
padding: 0,
align: 'center',
verticalAlign: 'middle',
fontSize: FontChart(26),
color: 'rgba(0, 255, 255, 1)',
fontFamily: 'Helvetica Condensed Bold'
},
value: {
align: 'center',
color: '#fff',
padding: [0, 0, 10, 0],
fontSize: FontChart(16),
verticalAlign: 'middle',
},
},
},
},
labelLine: {
length: 1,
length2: 20,
show: false
},
data: that.data
}
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},