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