156 lines
3.7 KiB
Vue
156 lines
3.7 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: [],
|
||
|
|
});
|
||
|
|
|
||
|
|
//查询列表
|
||
|
|
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
|
||
|
|
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>
|