You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
|
<div class="chart-container">
|
|
<span>{{ startDate }}-</span>
|
|
<span>{{ endDate }}-</span>
|
|
<div style="width: 800px;height: 800px;float: left" class="chart" ref="passengerFlowChart"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import axios from "axios";
|
|
|
|
|
|
export default {
|
|
name:'percentageCompany',
|
|
data() {
|
|
return {
|
|
tableLoading: true
|
|
}
|
|
},
|
|
methods: {
|
|
initPassengerFlowChart(data) {
|
|
const chartDom = this.$refs.passengerFlowChart;
|
|
const myChart = echarts.init(chartDom);
|
|
// 各公司收入占比
|
|
myChart.setOption({
|
|
// 图表配置选项
|
|
title: {
|
|
text: '各公司收入占比(万元)',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
left: 10,
|
|
top: 20,
|
|
bottom: 20,
|
|
data: data.legendData
|
|
},
|
|
series: [
|
|
{
|
|
name: '收入',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['40%', '50%'],
|
|
data: data.seriesData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
},
|
|
getDatd() {
|
|
// 调用后端API获取数据
|
|
///
|
|
///WhiteListManagerSys/comNo/percentageCompanies
|
|
axios.post('WhiteListManagerSys/comNo/percentageCompanies',
|
|
{
|
|
'startDate': this.startDate,
|
|
'endDate': this.endDate
|
|
}
|
|
).then((res) => {
|
|
var legendData = [];
|
|
var seriesData = [];
|
|
|
|
for (let item of this.companiesList) {
|
|
for (let ita of res.data){
|
|
if (item.subcomName==ita.SUBCOMNAME && ita.SUBCOMNAME!="全部"){
|
|
legendData.push(item.subcomName);
|
|
seriesData.push({
|
|
name: item.subcomName,
|
|
value: ita.CASH
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
this.initPassengerFlowChart({
|
|
legendData: legendData,
|
|
seriesData: seriesData,
|
|
})
|
|
this.tableLoading = false;
|
|
});
|
|
|
|
}
|
|
},
|
|
props: ['companiesList','startDate', 'endDate']
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |