echarts之饼图

常规柱形统计图

横向柱状统计图

以下是饼图代码：

<div id="pieChart"></div>

设置饼图的属性：

getPie() {
// 绘制图表
var myChart = echarts.init(document.getElementById('pieChart'))
this.option1 = {
stillShowZeroSum: true,
//鼠标划过时饼状图上显示的数据
tooltip: {
trigger: 'item',
formatter: '{b}:{c} ({d}%)'
},
//图例
legend: {//图例  标注各种颜色代表的模块
orient: 'vertical',//图例的显示方式  默认横向显示
// bottom: 5,//控制图例出现的距离  默认左上角
left: 'left',//控制图例的位置
// itemWidth: 25,//图例颜色块的宽度和高度
// itemHeight: 12,
textStyle: {//图例中文字的样式
color: '#000',
fontSize: 14
},
data: ['已逾期', '未还款', '已还款']//图例上显示的饼图各模块上的名字
},
//饼图中各模块的颜色
color: ['#FF5850', '#2D93FF', '#71D801'],
// 饼图数据
series: {
// name: 'bug分布',
type: 'pie',             //echarts图的类型   pie代表饼图
// radius: '75%',
radius: ['43%', '70%'],//饼图中饼状部分的大小所占整个父元素的百分比
center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
// data:''               //饼图数据
data: [                  //每个模块的名字和值
{name: '已逾期', value: this.overdueCount},
{name: '未还款', value: this.returnCount},
{name: '已还款', value: this.returnedMoney}
],
itemStyle: {
normal: {
label: {
show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
// position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
},
labelLine: {
show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
}
}
},
}
}
//使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option1)
},

在钩子函数中调用：

this.getPie()

拿到数据后赋值：

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);

效果如下：