1.代码
<template>
<div>
<el-card class="Ratio-card" shadow="hover">
<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
<div class="total">总计:{{total}}</div>
</el-card>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'EconomicRatio',
components: {
},
data() {
return {
msg: '开销占比',
dataList: [{
value: 1548,
name: '应交人民币'
},
{
value: 310,
name: '应交支付宝'
},
{
value: 234,
name: '应交微信'
},
{
value: 135,
name: '应交信用卡'
},
{
value: 335,
name: '应交交通卡'
},
{
value: 800,
name: '应交其他'
}
],
total: 0,
datetime: '2021-06',
// dataList: []
}
},
created() {
// this.getChartData();
},
mounted() {
this.drawLine();
},
methods: {
getChartData() {//接口获取数据
getList().then(res => {
console.log(res)
let data = res.data
console.log('data', data)
this.dataList = data.list
console.log(' this.dataList ', this.dataList)
this.total = data.total
this.datetime = data.datetime
})
},
drawLine() {
this.$nextTick(() => {
// this.getChartData();
setTimeout(() => {
console.log(' 挂载时调用数据', this.dataList)
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
const option = {
title: {
text: this.msg,
subtext: this.datetime,
left: 'center'
},
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b}: {c} ({d}%)",
formatter: "{b} <br/> {c} ({d}%)",
},
// color: ['#409EFF', '#67C23A', '#E6A23C', '#f50', '#2db7f5', '#87d068'],
legend: {
bottom: 0,
left: 'center',
aling: 'auto',
data: this.dataList.name,
itemWidth: 15,
itemHeight: 15,
},
series: [{
name: '访问来源',
type: 'pie',
center: [150, 180],
radius: ['40%', '70%'],
tooltip: {
show: true
},
label: {
show: false,
position: 'center',
bottom: 0,
// 环形中间显示数值
// normal: {
// position: 'center',
// formatter: '{per|{c}}{b|个}\n{a|{b}}\n{hr|}',
// rich: {
// per: {
// color: '#0abffd',
// fontSize: 28,
// lineHeight: 28,
// align: 'center'
// },
// a: {
// color: '#999999',
// align: 'center',
// fontSize: 12
// },
// b: {
// color: '#0abffd',
// fontSize: 12,
// lineHeight: 40,
// align: 'center'
// },
// hr: {
// width: '100%',
// height: 0,
// alien: 'center'
// }
// }
// },
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
itemStyle: {
color: function (params) {
var colorList = ['#2c3f58', '#4ed139', '#289cf4', '#fdca57', '#ff9e48', '#87d068']
return colorList[params.dataIndex];
}
},
data: this.dataList
}]
}
// 绘制图表
myChart.setOption(option);
}, 200)
})
}
}
}
</script>
<style lang='scss' scoped>
.Ratio-card {
height: auto;
.total {
width: 100%;
padding: 20px;
}
}
</style>
2.效果