WI/Web.V1.0.git

			@@ -1,62 +1,52 @@
			<!DOCTYPE html>
			<html lang="en" >
			<html lang="en">

			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>类型分布</title>
			<script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
			<script src="/ai_html/views/demo/js/tailwind.js"></script>
			<script src="/ai_html/views/demo/js/vue.global.js"></script>
			<script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
			<link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
			</link>
			<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
			<script src="/ai_html/views/demo/js/echarts.min.js"></script>
			<script src="/@/utils/formatTime.ts"></script>
			</head>

			<body>
			<div class="w-full h-full bg-[#fff] px-10 py-0" id="monthlyPay">
			<div class="w-full h-[270px]" id="MonthlyPayChart">
			<div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px] space-y-1" id="monthlyPay">
			<div class="w-full h-[270px] bg-[#fff]" id="MonthlyPayChart">
			</div>
			<div class="w-full h-[270px]" id="MonthPayRecord">
			<div class="w-full h-[270px] bg-[#fff]" id="MonthPayRecord">
			</div>
			<div class="w-full h-[370px]" id="MonthPayAmount">
			<div class="w-full h-[370px] bg-[#fff]" id="MonthPayAmount">
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;

			const monthlyPayChart = ref(null)
			const monthPayRecord = ref(null)
			const monthPayAmount = ref(null)
			createApp({
			setup() {
			const initMonthlyPayEChart = () => {
			const chartDom = document.getElementById('MonthlyPayChart');
			const myChart = echarts.init(chartDom);
			monthlyPayChart.value = myChart
			const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }];
			//下面是一个简单的demo，方便展示数据格式和构成
			let option = {
			title: {
			text: '缴费占比',
			textStyle:{
			fontSize:13
			textStyle: {
			fontSize: 13
			}
			},
			legend: {},
			tooltip: {
			trigger: 'axis',
			formatter: function (params) {
			params = params[0];
			var date = new Date(params.name);
			var hour = date.getHours();
			var minutes = date.getMinutes();
			if (hour < 10) {
			hour = '0' + hour;
			}
			if (minutes < 10) {
			minutes = '0' + minutes;
			}
			var dateStr = hour + ':' + minutes;
			return dateStr + ' ' + params.value[1];
			},
			axisPointer: {
			animation: false
			}
			@@ -108,6 +98,9 @@
			color: '#1B2232'
			}
			},
			dataZoom: {
			type: 'inside',
			},
			series: [{
			name: '',
			type: 'line',
			@@ -124,11 +117,12 @@
			const initMonthPayRecordEChart = () => {
			const chartDom = document.getElementById('MonthPayRecord');
			const myMonthPayChart = echarts.init(chartDom);
			monthPayRecord.value = myMonthPayChart
			var monthPayOption = {
			title: {
			text: '近12个月的缴费记录',
			textStyle:{
			fontSize:13
			textStyle: {
			fontSize: 13
			}
			},
			tooltip: {
			@@ -149,7 +143,7 @@
			}
			},
			grid: {
			top:'23%',
			top: '23%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			@@ -167,6 +161,9 @@
			type: 'value'
			}
			],
			dataZoom: {
			type: 'inside',
			},
			series: [
			{
			name: '厦门',
			@@ -231,29 +228,38 @@
			const initMonthPayAmountEChart = () => {
			const chartDom = document.getElementById('MonthPayAmount');
			const myMonthPayAmountChart = echarts.init(chartDom);
			monthPayAmount.value = myMonthPayAmountChart
			var monthPayAmountOption = {
			title: {
			text: '近12个月的缴费金额',
			textStyle:{
			fontSize:13
			textStyle: {
			fontSize: 13
			}
			},
			dataZoom: {
			type: 'inside',
			},
			tooltip: {},
			legend: {},
			xAxis: {
			data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
			data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
			},
			yAxis: {},
			series: [{
			name: "Sale",
			name: "厦门",
			type: "bar",
			data: [5, 20, 36, 10, 10, 20, 4]
			data: [5, 20, 36, 10, 10, 20, 4, 34, 43, 59, 12, 79]
			}]
			}
			monthPayAmountOption && myMonthPayAmountChart.setOption(monthPayAmountOption);
			myMonthPayAmountChart && myMonthPayAmountChart.resize();
			}
			onMounted(() => {
			window.parent.addEventListener('resize', () => {
			monthlyPayChart.value && monthlyPayChart.value.resize();
			monthPayRecord.value && monthPayRecord.value.resize();
			monthPayAmount.value && monthPayAmount.value.resize();
			})
			initMonthlyPayEChart();
			initMonthPayRecordEChart()
			initMonthPayAmountEChart()