aida_front/src/component/Administrator/trialUserConversionRateChart.vue

<template>
    <div class="recentNewUserChart admin_page">
        <div class="admin_table_search">
            <div class="admin_state">
				<div class="admin_state_item">
					<span>Select Time:</span>
					<a-range-picker
						style="width:250px"
						class="range_picker"
						v-model:value="rangePickerValue"
						:placeholder="[
							$t('HistoryPage.StartDate'),
							$t('HistoryPage.EndDate'),
						]"
						valueFormat="YYYY-MM-DD"
					>
						<template #suffixIcon>
							<span
								class="icon iconfont range_picker_icon icon-rili"
							></span>
						</template>
					</a-range-picker>
				</div>
            </div>
			<div class="admin_search">
				<div class="admin_search_item" @click="searchHistoryList">Search</div>
			</div>
			<div class="admin_state_list">
				<div class="admin_state_list_item" @click="lastGeTrialList('year')">Nearly a year</div>
				<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
				<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
			</div>
        </div>

        <div class="admin_table_content" ref="pageChartDom"></div>
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    ref,
    createVNode,
    computed,
    reactive,
    toRefs,
    onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
export default defineComponent({
    components: {},
    setup() {
        let filter: any = reactive({
            dataList: {},
        });

        let filterData: any = reactive({
            rangePickerValue: [],
        });
     
        //查询列表
        let searchHistoryList = () => {
            gettrialList();
        };
		let lastGeTrialList = (str:string)=>{
			let currentDate = new Date();
			let currentTimestamp = Math.floor(currentDate.getTime()  / 1000);
			// 计算30天前的时间戳
			let thirtyDaysAgoTimestamp
			if(str == 'year'){
				thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
			}else if(str == 'month'){
				thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
			}else if(str == 'week'){
				thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
			}
			filterData.rangePickerValue = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),formatTime(currentTimestamp,'YYYY-MM-DD')]
			gettrialList();
		}
        //获取列表
        let gettrialList = async () => {
			let startDate: any = filterData.rangePickerValue?.[0]
                ? filterData.rangePickerValue[0]+' '+'00:00:00'
                : "";
            let endDate: any = filterData.rangePickerValue?.[1]
                ? filterData.rangePickerValue[1]+' '+'00:00:00'
                : "";
			let data = {
				endTime:endDate,
				startTime:startDate,
			}
            Https.axiosGet(Https.httpUrls.conversionRate,{params:data}).then((rv: any) => {
                if (rv) {
					let entries:any = Object.entries(rv);
                    let data: any = [];
					for (let [key, value] of entries) {
						let str 
						if(key != 'conversionRate'){
							if(key == 'trialToOfficialCount'){
								str = 'Trial To Official'
							}else{
								str = 'Trial User'
							}
							let obj = {
								name: str,
								value: value
							}
							data.push(obj);
						}
					}
                    filter.dataList = data;
                    setEcharts(data);
                    // this.workspaceItem.position = this.singleTypeList[0].label
                }
            });
        };
        let myChart: any;
        let setEcharts = (data: any) => {
            if (myChart) {
                myChart.setOption({
                    series: [
                        {
                            data: data,
                        },
                    ],
                });
            } else {
                echarts.use([
                    TooltipComponent,
                    LegendComponent,
                    PieChart,
                    CanvasRenderer,
                    LabelLayout,
                ]);
                var chartDom = pageChartDom.value;
                myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: "item",
						formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
					legend: {
						top: '10%',
						left: 'center',
						// formatter: '{a} <br/>{b}'
					},
                    series: [
						{
							name:'Rate',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							
							itemStyle: {
								borderRadius: 10
							},
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
								show: true,
								fontSize: 30,
								fontWeight: 'bold'
								},
							},
							labelLine: {
								show: false,
							},
							data: data
						}
					]
                };

                option && myChart.setOption(option);
            }
        };
       
        let pageChartDom: any = ref();
        onMounted(() => {
            gettrialList();
        });
        return {
            ...toRefs(filter),
            ...toRefs(filterData),
			lastGeTrialList,
            searchHistoryList,
            gettrialList,
            pageChartDom,
        };
    },
    data() {
        return {};
    },

    methods: {},
});
</script>