137 lines
2.5 KiB
Vue
137 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="leftBottom">
|
|||
|
|
<Card title="特殊作业情况">
|
|||
|
|
<div class="mainContainer">
|
|||
|
|
<div id="pieEchart" style="width:100%;height:100%"></div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import Card from "@/components/card.vue";
|
|||
|
|
import { ref, onMounted, watch } from "vue";
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
|
|||
|
|
function drawPie(){
|
|||
|
|
type EChartsOption = echarts.EChartsOption;
|
|||
|
|
|
|||
|
|
var chartDom = document.getElementById('pieEchart')!;
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var option: EChartsOption;
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: [ 'Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others' ]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
grid:{
|
|||
|
|
left: '5%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '5%',
|
|||
|
|
containLabel:true
|
|||
|
|
},
|
|||
|
|
name: 'Access From',
|
|||
|
|
type: 'pie',
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
radius: [0, '30%'],
|
|||
|
|
label: {
|
|||
|
|
position: 'inner',
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: 1548, name: 'Search Engine' },
|
|||
|
|
{ value: 775, name: 'Direct' },
|
|||
|
|
{ value: 679, name: 'Marketing', selected: true }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Access From',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['45%', '60%'],
|
|||
|
|
labelLine: {
|
|||
|
|
length: 1
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
|
|||
|
|
backgroundColor: '#F6F8FC',
|
|||
|
|
borderColor: '#8C8D8E',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderRadius: 3,
|
|||
|
|
|
|||
|
|
rich: {
|
|||
|
|
a: {
|
|||
|
|
color: '#6E7079',
|
|||
|
|
lineHeight: 10,
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
hr: {
|
|||
|
|
borderColor: '#8C8D8E',
|
|||
|
|
width: '100%',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
height: 0
|
|||
|
|
},
|
|||
|
|
b: {
|
|||
|
|
color: '#4C5058',
|
|||
|
|
fontSize: 10,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
lineHeight: 12
|
|||
|
|
},
|
|||
|
|
per: {
|
|||
|
|
color: '#fff',
|
|||
|
|
backgroundColor: '#4C5058',
|
|||
|
|
padding: [1, 1],
|
|||
|
|
borderRadius: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: 1048, name: 'Baidu' },
|
|||
|
|
{ value: 335, name: 'Direct' },
|
|||
|
|
{ value: 310, name: 'Email' },
|
|||
|
|
{ value: 251, name: 'Google' },
|
|||
|
|
{ value: 234, name: 'Union Ads' },
|
|||
|
|
{ value: 147, name: 'Bing' },
|
|||
|
|
{ value: 135, name: 'Video Ads' },
|
|||
|
|
{ value: 102, name: 'Others' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted( async () => {
|
|||
|
|
drawPie()
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.leftBottom {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.mainContainer{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
::v-deep .h-card .content {
|
|||
|
|
height: 80%;
|
|||
|
|
}
|
|||
|
|
</style>
|