| | |
| | | <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-[50%] h-full bg-[#f2f4f8]" id="creditRateRank"> |
| | | <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="creditRateRank"> |
| | | <div class="space-y-1 bg-[rgb(242,244,248)]"> |
| | | <div class="bg-white"> |
| | | <div class="item_title"> |
| | | <div class="leader_left"></div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="w-full h-full bg-white"> |
| | | <div class="w-full h-full bg-white" v-resize="chartContainerResize"> |
| | | <div class="item_title"> |
| | | <div class="leader_left"></div> |
| | | <span>用户评分分布</span> |
| | |
| | | </div> |
| | | <div class="w-full h-[250px] mt-[10px]" id="CreditRateRank"></div> |
| | | </div> |
| | | <div class="w-full bg-white h-[320px]" id="CreditRatePieRank"></div> |
| | | <div class="w-full bg-white h-[320px]" id="CreditRatePieRank" v-resize="chartContainerResize"></div> |
| | | </div> |
| | | </div> |
| | | </body> |
| | |
| | | text: '总评分数', |
| | | subtext: '789897' + '\n人', |
| | | itemGap: 8, |
| | | left: '29%', |
| | | left: '29.5%', |
| | | top: '40%', |
| | | textAlign: 'center', |
| | | textStyle: { |
| | |
| | | var creditRatePieRankDom = echarts.init(chartDom); |
| | | creditRatePieRankRef.value = creditRatePieRankDom; |
| | | var option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: barXData, |
| | |
| | | }; |
| | | option && creditRatePieRankDom.setOption(option); |
| | | }; |
| | | const chartContainerResize = ({ width, height }) => { |
| | | creditRateRankRef.value.resize(); |
| | | creditRatePieRankRef.value.resize(); |
| | | }; |
| | | onMounted(() => { |
| | | window.addEventListener('resize', () => { |
| | | creditRateRankRef.value.resize(); |
| | | creditRatePieRankRef.value.resize(); |
| | | }); |
| | | // 页面加载完成后初始化图表 |
| | | initCreditRateRankChart(); |
| | | initCreditRateRankBarChart(); |
| | | }); |
| | | |
| | | return { state }; |
| | | return { state, chartContainerResize }; |
| | | }, |
| | | }); |
| | | App.use(ElementPlus); |
| | | elementResizeDirective(App); |
| | | App.mount('#creditRateRank'); |
| | | </script> |
| | | </html> |