调整管理员页面

src/component/Administrator/trialUserConversionRateChart.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="recentNewUserChart admin_page">
+        <div class="admin_table_search">
+            <div class="admin_state">
+            </div>
+            <div class="admin_search">
+               
+            </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 gettrialList = async () => {
+            Https.axiosGet(Https.httpUrls.conversionRate).then((rv: any) => {
+                if (rv) {
+					let entries:any = Object.entries(rv);
+                    let data: any = [];
+					for (let [key, value] of entries) {
+						let str 
+						console.log(key);
+						
+						
+						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'
+					},
+                    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),
+            searchHistoryList,
+            gettrialList,
+            pageChartDom,
+        };
+    },
+    data() {
+        return {};
+    },
+
+    methods: {},
+});
+</script>