| | |
| | | <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> |
| | | <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script> |
| | | <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script> |
| | | <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" /> |
| | | <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" /> |
| | | <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script> |
| | |
| | | </head> |
| | | |
| | | <body> |
| | | <div class="w-full h-full bg-[#f2f4f8]" id="leaderBoard"> |
| | | <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]"> |
| | | <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="leaderBoard"> |
| | | <div class="space-y-1 bg-[rgb(242,244,248)]"> |
| | | <div class="bg-white"> |
| | | <div class="item_title"> |
| | | <div class="leader_left"></div> |
| | |
| | | <el-table-column prop="CompanyName" label="网格员"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | |
| | | <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div> |
| | | <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div> |
| | | <div v-resize="chartContainerResize" class="w-full h-full"> |
| | | <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div> |
| | | <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | const leaderChartDomRef = ref(null); |
| | | const leaderBarChartDomRef = ref(null); |
| | | const App = createApp({ |
| | | setup() { |
| | | let state = reactive({ |
| | |
| | | const initLeaderBoardChart = () => { |
| | | var chartDom = document.getElementById('leaderChart'); |
| | | var leaderChartDom = echarts.init(chartDom); |
| | | leaderChartDomRef.value = leaderChartDom; |
| | | var option = { |
| | | title: { |
| | | text: '近12月缴费金额', |
| | |
| | | const barXData = state.leaderBoardList.map((item) => item.Name); |
| | | var chartDom = document.getElementById('leaderBarChart'); |
| | | var leaderBarChartDom = echarts.init(chartDom); |
| | | leaderBarChartDomRef.value = leaderBarChartDom; |
| | | var option = { |
| | | xAxis: { |
| | | type: 'category', |
| | |
| | | |
| | | option && leaderBarChartDom.setOption(option); |
| | | }; |
| | | const chartContainerResize = ({ width, height }) => { |
| | | leaderChartDomRef.value.resize(); |
| | | leaderBarChartDomRef.value.resize(); |
| | | }; |
| | | onMounted(() => { |
| | | initLeaderBoardChart(); |
| | | initLeaderBoardBarChart(); |
| | | }); |
| | | |
| | | return { state }; |
| | | return { state, chartContainerResize }; |
| | | }, |
| | | }); |
| | | App.use(ElementPlus); |
| | | elementResizeDirective(App); |
| | | App.mount('#leaderBoard'); |
| | | </script> |
| | | </html> |