153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
|
<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: [],
|
||
|
|
userType: "",
|
||
|
|
});
|
||
|
|
let state: any = ref([
|
||
|
|
{
|
||
|
|
label: "all",
|
||
|
|
value: "",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "visitor",
|
||
|
|
value: "visitor",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "trial",
|
||
|
|
value: "trial",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "official",
|
||
|
|
value: "official",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
//查询列表
|
||
|
|
let searchHistoryList = () => {
|
||
|
|
gettrialList();
|
||
|
|
};
|
||
|
|
//获取列表
|
||
|
|
let gettrialList = async () => {
|
||
|
|
Https.axiosGet(Https.httpUrls.trialUserCountry).then((rv: any) => {
|
||
|
|
if (rv) {
|
||
|
|
let data: any = [];
|
||
|
|
rv.names.forEach((item: any, index: number) => {
|
||
|
|
let obj = {
|
||
|
|
name: item,
|
||
|
|
value: rv.values[index],
|
||
|
|
};
|
||
|
|
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",
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: '5%',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "pie",
|
||
|
|
radius: "55%",
|
||
|
|
center: ["50%", "55%"],
|
||
|
|
data: data,
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
let pageChartDom: any = ref();
|
||
|
|
onMounted(() => {
|
||
|
|
gettrialList();
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
...toRefs(filter),
|
||
|
|
...toRefs(filterData),
|
||
|
|
state,
|
||
|
|
searchHistoryList,
|
||
|
|
gettrialList,
|
||
|
|
pageChartDom,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {},
|
||
|
|
});
|
||
|
|
</script>
|