The following is a pie chart of code:
<div id="pieChart" style="width:100% ;height:300px;"></div>
Set the properties of the pie:
getPie () {
// graphed
var myChart = echarts.init (document.getElementById ( 'PieChart'))
this.option1 = {
stillShowZeroSum: to true,
data displayed on the mouse across // pie charts
ToolTip: {
Trigger: 'Item',
Formatter: '{B}: {C} ({D}%)'
},
// Legend
legend: {// legend label colors represent various modules
orient: 'vertical', // display the legend the default landscape display mode
// bottom: 5, // default control key appears from the upper left corner
left: 'left', // the control position of the legend
// itemWidth: 25, // block width and height of the color legend
// itemHeight : 12,
textStyle: {// legend text style
color: '# 000',
fontSize:14
},
data: [ 'has expired.', 'non-payment' 'has the repayment'] // the name of each module on the pie chart on the display legend
},
// color pie chart of each module
color: [ '# FF5850 ',' # 2D93FF ',' # 71D801 '],
// data pie
Series: {
// name:' distribution bugs',
type: 'pie', // echarts pie chart type of the pie represents
// radius: % '75 ',
RADIUS: ['43%', '70% '], // size of the pie chart pie percentage of the entire portion of the parent element
center: ['50%', '50 % '], // position throughout the whole pie parent element in the
// data: '' // pie data
data: [// each module names and values
{name:' overdue ', value: this.} overdueCount,
{name: 'non-payment', value: this.returnCount},
{name: 'have repayment', value: this.returnedMoney}
],
ItemStyle:{
normal: {
label: {
show: true, // if there is a pie chart label each module represents what text annotation defaults to true
// position: 'Inner', // marked on the control with respect to the character pie pie pie charts default location
} ,
labelLine: {
show: Demo in small thin lines marked on the outside of the official website of true // hide the default display display
}
}
}
}
}
// just use the specified configuration items and data charts.
myChart.setOption (this.option1)
},
In the hook function call:
this.getPie()
After getting data assignment:
this.option1.series.data[0].value = respond.data.data.overdueCount
this.option1.series.data[1].value = respond.data.data.returnCount
this.option1.series.data[2].value = respond.data.data.returnedMoney
var myChart = echarts.init(document.getElementById('pieChart'));
myChart.setOption(this.option1);
Results are as follows:
