WI/Web.V1.0.git

yangyin

2024-07-15 a7f9e6e22179ffa06252863fa3e30387d7873d7f

feat: 新增月度缴费图表

已添加1个文件

已修改1个文件

	src/views/project/ch/demo/MonthlyPay.html	256 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/project/ch/demo/UnionPay.html	140 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/views/project/ch/demo/MonthlyPay.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,256 @@
<!DOCTYPE html>
<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/static/js/tailwind.js"></script>
    <script src="/customer_list/ch/static/js/vue.global.js"></script>
    <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
    </link>
    <script src="/customer_list/ch/static/js/echarts.min.js"></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>
        <div class="w-full h-[270px]" id="MonthPayRecord">
        </div>
        <div class="w-full h-[370px]" id="MonthPayAmount">
        </div>
    </div>
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;

    createApp({
        setup() {
            const initMonthlyPayEChart = () => {
                const chartDom = document.getElementById('MonthlyPayChart');
                const myChart = echarts.init(chartDom);
                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: 'ç¼´è´¹å æ¯'
                    },
                    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
                        }
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        },
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                color: '#1B2232'
                            }
                        },
                        axisLabel: {
                            formatter: function (value, index) {
                                var date = new Date(value);
                                var hour = date.getHours();
                                var minutes = date.getMinutes();
                                if (hour < 10) {
                                    hour = '0' + hour;
                                }
                                if (minutes < 10) {
                                    minutes = '0' + minutes;
                                }
                                return hour + ':' + minutes;
                            },
                            color: '#1B2232'
                        }
                    },
                    yAxis: {
                        name: 'æ°æ®',
                        nameTextStyle: {
                            color: '#1B2232',
                            fontSize: 15
                        },
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1B2232'
                            }
                        },
                        axisLabel: {
                            color: '#1B2232'
                        }
                    },
                    series: [{
                        name: '',
                        type: 'line',
                        hoverAnimation: false,
                        smooth: true,
                        symbolSize: 4,
                        data: data

                    }]
                };
                option && myChart.setOption(option);
                myChart && myChart.resize();
            }
            const initMonthPayRecordEChart = () => {
                const chartDom = document.getElementById('MonthPayRecord');
                const myMonthPayChart = echarts.init(chartDom);
                var monthPayOption = {
                    title: {
                        text: 'è¿12ä¸ªæçç¼´è´¹è®°å½'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['å¦é¨', 'äºä¾', 'éç¾', 'æµ·æ²§', 'ç¿å®']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'å¦é¨',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'äºä¾',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'éç¾',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'æµ·æ²§',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: 'ç¿å®',
                            type: 'line',
                            stack: 'Total',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };

                monthPayOption && myMonthPayChart.setOption(monthPayOption);
                myMonthPayChart && myMonthPayChart.resize();
            }
            const initMonthPayAmountEChart = () => {
                const chartDom = document.getElementById('MonthPayAmount');
                const myMonthPayAmountChart = echarts.init(chartDom);
                var monthPayAmountOption = {
                    title: {
                        text: 'è¿12ä¸ªæçç¼´è´¹éé¢'
                    },
                    tooltip: {},
                    legend: {},
                    xAxis: {
                        data: ["1æ", "2æ", "3æ", "4æ", "5æ", "6æ", "7æ"]
                    },
                    yAxis: {},
                    series: [{
                        name: "Sale",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20, 4]
                    }]
                }
                monthPayAmountOption && myMonthPayAmountChart.setOption(monthPayAmountOption);
                myMonthPayAmountChart && myMonthPayAmountChart.resize();
            }
            onMounted(() => {
                initMonthlyPayEChart();
                initMonthPayRecordEChart()
                initMonthPayAmountEChart()
            });


        },
    }).mount('#monthlyPay');
</script>

</html>

 src/views/project/ch/demo/UnionPay.html

@@ -1,80 +1,84 @@
<!DOCTYPE html>
<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/static/js/tailwind.js"></script>
        <script src="/customer_list/ch/static/js/vue.global.js"></script>	
        <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css"></link>
        <script src="/customer_list/ch/static/js/echarts.min.js"></script>	
    </head>
    <body>
        <div class="w-full h-full bg-[#fff] px-10 py-0" id="unionPay">
            <div class="w-full h-[40px] flex items-center">é¶èç¼´è´¹ç±»åå æ¯</div>
            <div class="h-full w-full" id="UnionPayChart">
				
            </div>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ç±»ååå¸</title>
    <script src="/customer_list/ch/static/js/tailwind.js"></script>
    <script src="/customer_list/ch/static/js/vue.global.js"></script>
    <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
    </link>
    <script src="/customer_list/ch/static/js/echarts.min.js"></script>
</head>

<body>
    <div class="w-full h-full bg-[#fff] px-10 py-0" id="unionPay">
        <div class="w-full h-[40px] flex items-center">é¶èç¼´è´¹ç±»åå æ¯</div>
        <div class="w-full h-[370px]" id="UnionPayChart">
        </div>
    </body>
    <script>
        const { createApp, onMounted, ref, reactive } = Vue;
        createApp({
            setup() {
    </div>
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    createApp({
        setup() {
            const initUnionPayEChart = () => {
                const chartDom = document.getElementById('UnionPayChart');
                const myChart = echarts.init(chartDom);
                var option = {
                dataset: {
                    source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, 'Matcha Latte'],
                    [57.1, 78254, 'Milk Tea'],
                    [74.4, 41032, 'Cheese Cocoa'],
                    [50.1, 12755, 'Cheese Brownie'],
                    [89.7, 20145, 'Matcha Cocoa'],
                    [68.1, 79146, 'Tea'],
                    [19.6, 91852, 'Orange Juice'],
                    [10.6, 101852, 'Lemon Juice'],
                    [32.7, 20112, 'Walnut Brownie']
                    dataset: {
                        source: [
                            ['score', 'amount', 'product'],
                            [89.3, 58212, 'ç¥¨æ®æå°å²æ£'],
                            [57.1, 78254, 'ç¥¨æ®æå°'],
                            [74.4, 41032, 'åæ´å§æå²æ£'],
                            [50.1, 12755, 'åæ´å§æ'],
                            [89.7, 20145, 'åæ¶å§æ'],
                            [68.1, 79146, 'å§æ'],
                            [19.6, 91852, 'ç¼´è´¹å²æ£'],
                            [10.6, 101852, 'ç¼´è´¹'],
                            [32.7, 20112, 'æ¥è¯¢']
                        ]
                    },
                    grid: { containLabel: true },
                    xAxis: { 
                        // name: 'amount'
                     },
                    yAxis: { type: 'category' },
                    // visualMap: {
                    //     orient: 'horizontal',
                    //     left: 'center',
                    //     min: 10,
                    //     max: 100,
                    //     text: ['High Score', 'Low Score'],
                    //     // Map the score column to color
                    //     dimension: 0,
                    //     inRange: {
                    //         color: ['#65B581', '#FFCE34', '#FD665F']
                    //     }
                    // },
                    series: [
                        {
                            type: 'bar',
                            encode: {
                                // Map the "amount" column to X axis.
                                x: 'amount',
                                // Map the "product" column to Y axis
                                y: 'product'
                            }
                        }
                    ]
                },
                grid: { containLabel: true },
                xAxis: { name: 'amount' },
                yAxis: { type: 'category' },
                visualMap: {
                    orient: 'horizontal',
                    left: 'center',
                    min: 10,
                    max: 100,
                    text: ['High Score', 'Low Score'],
                    // Map the score column to color
                    dimension: 0,
                    inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                    }
                },
                series: [
                    {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                    }
                ]
                };

option && myChart.setOption(option);
                option && myChart.setOption(option);
            }
                onMounted(() => {
                    initUnionPayEChart();
                });
            onMounted(() => {
                initUnionPayEChart();
            });


            },
        }).mount('#unionPay');
    </script>
</html>
        },
    }).mount('#unionPay');
</script>

</html>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,256 @@
			<!DOCTYPE html>
			<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/static/js/tailwind.js"></script>
			<script src="/customer_list/ch/static/js/vue.global.js"></script>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
			</link>
			<script src="/customer_list/ch/static/js/echarts.min.js"></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>
			<div class="w-full h-[270px]" id="MonthPayRecord">
			</div>
			<div class="w-full h-[370px]" id="MonthPayAmount">
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;

			createApp({
			setup() {
			const initMonthlyPayEChart = () => {
			const chartDom = document.getElementById('MonthlyPayChart');
			const myChart = echarts.init(chartDom);
			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: 'ç¼´è´¹å æ¯'
			},
			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
			}
			},
			xAxis: {
			type: 'time',
			splitLine: {
			show: false
			},
			splitNumber: 8,
			axisLine: {
			lineStyle: {
			color: '#1B2232'
			}
			},
			axisLabel: {
			formatter: function (value, index) {
			var date = new Date(value);
			var hour = date.getHours();
			var minutes = date.getMinutes();
			if (hour < 10) {
			hour = '0' + hour;
			}
			if (minutes < 10) {
			minutes = '0' + minutes;
			}
			return hour + ':' + minutes;
			},
			color: '#1B2232'
			}
			},
			yAxis: {
			name: 'æ°æ®',
			nameTextStyle: {
			color: '#1B2232',
			fontSize: 15
			},
			type: 'value',
			boundaryGap: [0, '100%'],
			splitLine: {
			show: false
			},
			axisLine: {
			lineStyle: {
			color: '#1B2232'
			}
			},
			axisLabel: {
			color: '#1B2232'
			}
			},
			series: [{
			name: '',
			type: 'line',
			hoverAnimation: false,
			smooth: true,
			symbolSize: 4,
			data: data

			}]
			};
			option && myChart.setOption(option);
			myChart && myChart.resize();
			}
			const initMonthPayRecordEChart = () => {
			const chartDom = document.getElementById('MonthPayRecord');
			const myMonthPayChart = echarts.init(chartDom);
			var monthPayOption = {
			title: {
			text: 'è¿12ä¸ªæçç¼´è´¹è®°å½'
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'cross',
			label: {
			backgroundColor: '#6a7985'
			}
			}
			},
			legend: {
			data: ['å¦é¨', 'äºä¾', 'éç¾', 'æµ·æ²§', 'ç¿å®']
			},
			toolbox: {
			feature: {
			saveAsImage: {}
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [
			{
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
			],
			yAxis: [
			{
			type: 'value'
			}
			],
			series: [
			{
			name: 'å¦é¨',
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			focus: 'series'
			},
			data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
			name: 'äºä¾',
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			focus: 'series'
			},
			data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
			name: 'éç¾',
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			focus: 'series'
			},
			data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
			name: 'æµ·æ²§',
			type: 'line',
			stack: 'Total',
			areaStyle: {},
			emphasis: {
			focus: 'series'
			},
			data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
			name: 'ç¿å®',
			type: 'line',
			stack: 'Total',
			label: {
			show: true,
			position: 'top'
			},
			areaStyle: {},
			emphasis: {
			focus: 'series'
			},
			data: [820, 932, 901, 934, 1290, 1330, 1320]
			}
			]
			};

			monthPayOption && myMonthPayChart.setOption(monthPayOption);
			myMonthPayChart && myMonthPayChart.resize();
			}
			const initMonthPayAmountEChart = () => {
			const chartDom = document.getElementById('MonthPayAmount');
			const myMonthPayAmountChart = echarts.init(chartDom);
			var monthPayAmountOption = {
			title: {
			text: 'è¿12ä¸ªæçç¼´è´¹éé¢'
			},
			tooltip: {},
			legend: {},
			xAxis: {
			data: ["1æ", "2æ", "3æ", "4æ", "5æ", "6æ", "7æ"]
			},
			yAxis: {},
			series: [{
			name: "Sale",
			type: "bar",
			data: [5, 20, 36, 10, 10, 20, 4]
			}]
			}
			monthPayAmountOption && myMonthPayAmountChart.setOption(monthPayAmountOption);
			myMonthPayAmountChart && myMonthPayAmountChart.resize();
			}
			onMounted(() => {
			initMonthlyPayEChart();
			initMonthPayRecordEChart()
			initMonthPayAmountEChart()
			});


			},
			}).mount('#monthlyPay');
			</script>

			</html>

			@@ -1,80 +1,84 @@
			<!DOCTYPE html>
			<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/static/js/tailwind.js"></script>
			<script src="/customer_list/ch/static/js/vue.global.js"></script>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css"></link>
			<script src="/customer_list/ch/static/js/echarts.min.js"></script>
			</head>
			<body>
			<div class="w-full h-full bg-[#fff] px-10 py-0" id="unionPay">
			<div class="w-full h-[40px] flex items-center">é¶èç¼´è´¹ç±»åå æ¯</div>
			<div class="h-full w-full" id="UnionPayChart">

			</div>

			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>ç±»ååå¸</title>
			<script src="/customer_list/ch/static/js/tailwind.js"></script>
			<script src="/customer_list/ch/static/js/vue.global.js"></script>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
			</link>
			<script src="/customer_list/ch/static/js/echarts.min.js"></script>
			</head>

			<body>
			<div class="w-full h-full bg-[#fff] px-10 py-0" id="unionPay">
			<div class="w-full h-[40px] flex items-center">é¶èç¼´è´¹ç±»åå æ¯</div>
			<div class="w-full h-[370px]" id="UnionPayChart">
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			createApp({
			setup() {
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			createApp({
			setup() {
			const initUnionPayEChart = () => {
			const chartDom = document.getElementById('UnionPayChart');
			const myChart = echarts.init(chartDom);
			var option = {
			dataset: {
			source: [
			['score', 'amount', 'product'],
			[89.3, 58212, 'Matcha Latte'],
			[57.1, 78254, 'Milk Tea'],
			[74.4, 41032, 'Cheese Cocoa'],
			[50.1, 12755, 'Cheese Brownie'],
			[89.7, 20145, 'Matcha Cocoa'],
			[68.1, 79146, 'Tea'],
			[19.6, 91852, 'Orange Juice'],
			[10.6, 101852, 'Lemon Juice'],
			[32.7, 20112, 'Walnut Brownie']
			dataset: {
			source: [
			['score', 'amount', 'product'],
			[89.3, 58212, 'ç¥¨æ®æå°å²æ£'],
			[57.1, 78254, 'ç¥¨æ®æå°'],
			[74.4, 41032, 'åæ´å§æå²æ£'],
			[50.1, 12755, 'åæ´å§æ'],
			[89.7, 20145, 'åæ¶å§æ'],
			[68.1, 79146, 'å§æ'],
			[19.6, 91852, 'ç¼´è´¹å²æ£'],
			[10.6, 101852, 'ç¼´è´¹'],
			[32.7, 20112, 'æ¥è¯¢']
			]
			},
			grid: { containLabel: true },
			xAxis: {
			// name: 'amount'
			},
			yAxis: { type: 'category' },
			// visualMap: {
			// orient: 'horizontal',
			// left: 'center',
			// min: 10,
			// max: 100,
			// text: ['High Score', 'Low Score'],
			// // Map the score column to color
			// dimension: 0,
			// inRange: {
			// color: ['#65B581', '#FFCE34', '#FD665F']
			// }
			// },
			series: [
			{
			type: 'bar',
			encode: {
			// Map the "amount" column to X axis.
			x: 'amount',
			// Map the "product" column to Y axis
			y: 'product'
			}
			}
			]
			},
			grid: { containLabel: true },
			xAxis: { name: 'amount' },
			yAxis: { type: 'category' },
			visualMap: {
			orient: 'horizontal',
			left: 'center',
			min: 10,
			max: 100,
			text: ['High Score', 'Low Score'],
			// Map the score column to color
			dimension: 0,
			inRange: {
			color: ['#65B581', '#FFCE34', '#FD665F']
			}
			},
			series: [
			{
			type: 'bar',
			encode: {
			// Map the "amount" column to X axis.
			x: 'amount',
			// Map the "product" column to Y axis
			y: 'product'
			}
			}
			]
			};

			option && myChart.setOption(option);
			option && myChart.setOption(option);
			}
			onMounted(() => {
			initUnionPayEChart();
			});
			onMounted(() => {
			initUnionPayEChart();
			});


			},
			}).mount('#unionPay');
			</script>
			</html>
			},
			}).mount('#unionPay');
			</script>

			</html>