<Card :bordered="false" style="margin-bottom: 20px;">
<p slot="title">返佣汇总</p>
<Row :gutter="10" style="margin-bottom:20px;">
<i-col span="8">
<div class="charts" ref="rebateAmount" style="height:252px;margin-top:10px;"></div>
<div style="text-align: center;font-size: 16px;color: #333;">手续费金额</div>
</i-col>
</Row>
</Card>
<script src="../../../js/echarts.common.min.js"></script>
<script src="../../../js/jquery-1.11.3.js"></script>
data: function () {
return {
rebateAxis: ['返佣收款金额', '返佣退款金额', '返佣收款手续费', '返佣分期手续费', '返佣实际入账'],
rebateMoneyDataAll:'9999', //返佣总金额
rebateMoneyData: [
{value:1000, name:'返佣收款金额',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:2000, name:'返佣退款金额',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:4000, name:'返佣收款手续费',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:3000, name:'返佣分期手续费',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:0, name:'返佣实际入账',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
]
}
},
methods:{
getList:function(){
success: function (data) {
if (data.status === 200) {
_this.rebateInfo(_this.rebateAxis, _this.rebateMoneyData);
} else {
_this.$Message.error(data.message);
}
},
},
rebateInfo: function (rebateAxis, rebateMoneyData) {
var _this = this;
var charts = _this.$refs.rebateAmount;
option = {
title: {
text: '返佣总金额',
x: 'center',
y: 'center',
top: '100',
textStyle: {
fontSize: 16,
color: '#666',
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
graphic: {
type: 'text',
left: 'center',
top: '140px',
z: 2,
zlevel: 100,
style: {
text: '¥' + parseInt(_this.rebateMoneyDataAll),
width: 100,
height: 30,
color: '#333',
fontSize: 16
}
},
series: [
{
name: '返佣账单',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
},
},
labelLine: {
show: false
},
data: rebateMoneyData
}
]
};
var opt = option.series[0];
lineHides(opt);
//数据为零时隐藏线段
function lineHides(opt) {
jQuery.each(opt.data, function (i, item) {
if (item.value == 0) {
item.itemStyle.normal.labelLine.show = false;
item.itemStyle.normal.label.show = false;
}
});
}
//自适应宽高
var myChartContainer = function () {
_this.$refs.rebateAmount.style.width = _this.$refs.formInline.innerWidth + 'px';
_this.$refs.rebateAmount.style.height = _this.$refs.formInline.innerHeight + 'px';
};
myChartContainer();
var myChart = echarts.init(charts, 'macarons');
this.rebateList.push(myChart);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//浏览器大小改变时重置大小
window.onresize = function () {
myChartContainer();
for (var i = 0; i < _this.rebateList.length; i++) {
_this.rebateList[i].resize();
}
};
},
},
附加一段大屏数据开发、前端可视化的网址: