AI水务
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
wujingjing
2025-01-06 14e22728d1c03eb4cc770c8c93cfe9296b1a9441 
 customer_list/ch/ai_html/views/demo/html/MonthlyPay.html


@@ -12,11 +12,12 @@


   </link>


   <script src="/ai_html/views/demo/js/echarts.min.js"></script>


   <script src="/@/utils/formatTime.ts"></script>


   <script src="/ai_html/views/demo/js/customInstruction.js"></script>


</head>




<body>


   <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 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" v-resize="chartContainerResize">


      </div>


      <div class="w-full h-[270px] bg-[#fff]" id="MonthPayRecord">


      </div>


@@ -26,12 +27,15 @@


</body>


<script>


   const { createApp, onMounted, ref, reactive } = Vue;




   createApp({


   const monthlyPayChart = ref(null)


   const monthPayRecord = ref(null)


   const monthPayAmount = ref(null)


   const App=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 = {


@@ -114,6 +118,7 @@


         const initMonthPayRecordEChart = () => {


            const chartDom = document.getElementById('MonthPayRecord');


            const myMonthPayChart = echarts.init(chartDom);


            monthPayRecord.value = myMonthPayChart


            var monthPayOption = {


               title: {


                  text: '近12个月的缴费记录',


@@ -224,6 +229,7 @@


         const initMonthPayAmountEChart = () => {


            const chartDom = document.getElementById('MonthPayAmount');


            const myMonthPayAmountChart = echarts.init(chartDom);


            monthPayAmount.value = myMonthPayAmountChart


            var monthPayAmountOption = {


               title: {


                  text: '近12个月的缴费金额',


@@ -249,15 +255,22 @@


            monthPayAmountOption && myMonthPayAmountChart.setOption(monthPayAmountOption);


            myMonthPayAmountChart && myMonthPayAmountChart.resize();


         }


         const chartContainerResize = ({ width, height }) => {


            monthlyPayChart.value && monthlyPayChart.value.resize();


               monthPayRecord.value && monthPayRecord.value.resize();


               monthPayAmount.value && monthPayAmount.value.resize();


            };


         onMounted(() => {


            initMonthlyPayEChart();


            initMonthPayRecordEChart()


            initMonthPayAmountEChart()


         });




         return { chartContainerResize };




      },


   }).mount('#monthlyPay');


   })


   elementResizeDirective(App);


   App.mount('#monthlyPay');


</script>




</html>