| | |
|---|
| | | </div> |
|---|
| | | <div v-if="urlList && urlList.length > 0" class="w-full"> |
|---|
| | | <HTMLCom |
|---|
| | | data="http://127.0.0.1:5500/src/views/project/ch/demo/Overview.html" |
|---|
| | | data="http://192.168.1.7:8888/src/views/project/ch/demo/Overview.html" |
|---|
| | | v-for="(item, index) in urlList" |
|---|
| | | :key="index" |
|---|
| | | ></HTMLCom> |
|---|
| | |
|---|
| | | <!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/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/datav.umd.js"></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/iframe-resizer/child-5.1.5.js" async></script> |
|---|
| | | <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script> |
|---|
| | | <link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" /> |
|---|
| | | <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" /> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <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/datav.umd.js"></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/iframe-resizer/child-5.1.5.js" async></script> |
|---|
| | | <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script> |
|---|
| | | <link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css"> |
|---|
| | | </link> |
|---|
| | | <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css"> |
|---|
| | | </link> |
|---|
| | | <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css"> |
|---|
| | | </link> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div class="w-full h-full bg-[#f2f4f8] " id="overview"> |
|---|
| | | <!-- <div class="w-full h-[40px] flex items-center">年度缴费情况</div> |
|---|
| | | <body> |
|---|
| | | <div class="w-full h-full bg-[#f2f4f8]" id="overview"> |
|---|
| | | <!-- <div class="w-full h-[40px] flex items-center">年度缴费情况</div> |
|---|
| | | <div class="h-full"> |
|---|
| | | <div class="w-[310px] flex flex-wrap justify-between h-[220px]"> |
|---|
| | | <div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | <div class="screen-top-center"> |
|---|
| | | <div class="top-center-data"> |
|---|
| | | <div class="data-item" v-for="(item, index) in state.dataList"> |
|---|
| | | <p class="data-item-title">{{item.title}}</p> |
|---|
| | | <p class="data-item-desc">{{item.value}}</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="top-center-chart"> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="screen-top-header flex flex-wrap justify-center items-center"> |
|---|
| | | <div class="header-left flex-c"> |
|---|
| | | <i class="iconfont icon-ico_shuju text-[#1c86ff]"></i> |
|---|
| | | </div> |
|---|
| | | <div class="header-right flex-l"> |
|---|
| | | <span class="header-title">今日地区销量排行</span> |
|---|
| | | <Decoration3 class="dv-dec-3" /> |
|---|
| | | </div> |
|---|
| | | <div class="screen-top-center"> |
|---|
| | | <div class="top-center-data"> |
|---|
| | | <div class="data-item" v-for="(item, index) in state.dataList"> |
|---|
| | | <p class="data-item-title">{{item.title}}</p> |
|---|
| | | <p class="data-item-desc">{{item.value}}</p> |
|---|
| | | </div> |
|---|
| | | <div class=" max-w-[600px] h-full ml-[5px]"> |
|---|
| | | <div v-for="(item,index) in state.rankList.data" :key="index" class="flex"> |
|---|
| | | <div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div> |
|---|
| | | </div> |
|---|
| | | <div class="top-center-chart"> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="screen-top-header flex flex-wrap justify-center items-center"> |
|---|
| | | <div class="header-left flex-c"> |
|---|
| | | <i class="iconfont icon-ico_shuju text-[#1c86ff]"></i> |
|---|
| | | </div> |
|---|
| | | <div class="header-right flex-l"> |
|---|
| | | <span class="header-title">今日地区销量排行</span> |
|---|
| | | <Decoration3 class="dv-dec-3" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="max-w-[600px] h-full ml-[5px]"> |
|---|
| | | <div v-for="(item,index) in state.rankList.data" :key="index" class="flex"> |
|---|
| | | <div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div> |
|---|
| | | |
|---|
| | | <el-progress :stroke-width="20" :percentage="item.value/100" class="mb-[15px] w-full" |
|---|
| | | :text-inside="true"></el-progress> |
|---|
| | | <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div> |
|---|
| | | <el-progress |
|---|
| | | :stroke-width="20" |
|---|
| | | :percentage="item.value/100" |
|---|
| | | class="mb-[15px] w-full" |
|---|
| | | :text-inside="true" |
|---|
| | | ></el-progress> |
|---|
| | | <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="screen-top-header flex-l"> |
|---|
| | | <div class="header-left flex-c"> |
|---|
| | | <i class="iconfont icon-shangchuan text-[#1c86ff]"></i> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="screen-top-header flex-l"> |
|---|
| | | <div class="header-left flex-c"> |
|---|
| | | <i class="iconfont icon-shangchuan text-[#1c86ff]"></i> |
|---|
| | | </div> |
|---|
| | | <div class="header-right flex-l"> |
|---|
| | | <span class="header-title">今日业绩完成度</span> |
|---|
| | | <Decoration3 class="dv-dec-3" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="header-right flex-l"> |
|---|
| | | <span class="header-title">今日业绩完成度</span> |
|---|
| | | <Decoration3 class="dv-dec-3" /> |
|---|
| | | <div class="pond-section"> |
|---|
| | | <div id="pond" class="w-full h-[270px]"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="pond-section"> |
|---|
| | | <div id="pond" class="w-full h-[270px]"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | const { createApp, onMounted, ref, reactive } = Vue; |
|---|
| | | const { Decoration3 } = DataV; |
|---|
| | | const demoOverViewChart=ref(null) |
|---|
| | | const App = createApp({ |
|---|
| | | setup() { |
|---|
| | | let state = reactive({ |
|---|
| | | annualPayment: [ |
|---|
| | | { |
|---|
| | | ID: 1, |
|---|
| | | Name: '本年缴费', |
|---|
| | | Value: 8009987, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 2, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 7298.3, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 3, |
|---|
| | | Name: '本月缴费', |
|---|
| | | Value: 198, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 4, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 3, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 5, |
|---|
| | | Name: '本月缴费', |
|---|
| | | Value: 22, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 6, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 0.3, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 7, |
|---|
| | | Name: '今日实时', |
|---|
| | | Value: 198, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | ID: 8, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 198, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | |
|---|
| | | dataList: [ |
|---|
| | | { |
|---|
| | | title: '今日累计销量', |
|---|
| | | value: 755, |
|---|
| | | config: { |
|---|
| | | number: [755], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | title: '本周累计销量', |
|---|
| | | value: 3288, |
|---|
| | | config: { |
|---|
| | | number: [3288], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | title: '本月累计销量', |
|---|
| | | value: 14222, |
|---|
| | | config: { |
|---|
| | | number: [14222], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | title: '季度累计销量', |
|---|
| | | value: 41022, |
|---|
| | | config: { |
|---|
| | | number: [41022], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | title: '年度累计销量', |
|---|
| | | value: 176888, |
|---|
| | | config: { |
|---|
| | | number: [176888], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | title: '今日目标销量', |
|---|
| | | value: 820, |
|---|
| | | config: { |
|---|
| | | number: [820], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | completeObj: { |
|---|
| | | data: [45, 56], |
|---|
| | | shape: 'round' |
|---|
| | | }, |
|---|
| | | rankList: { |
|---|
| | | data: [ |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | const { createApp, onMounted, ref, reactive } = Vue; |
|---|
| | | const { Decoration3 } = DataV; |
|---|
| | | const demoOverViewChart = ref(null); |
|---|
| | | const App = createApp({ |
|---|
| | | setup() { |
|---|
| | | let state = reactive({ |
|---|
| | | annualPayment: [ |
|---|
| | | { |
|---|
| | | name: '武汉市', |
|---|
| | | value: 1210 |
|---|
| | | ID: 1, |
|---|
| | | Name: '本年缴费', |
|---|
| | | Value: 8009987, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '北京', |
|---|
| | | value: 1655 |
|---|
| | | ID: 2, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 7298.3, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '上海', |
|---|
| | | value: 1788 |
|---|
| | | ID: 3, |
|---|
| | | Name: '本月缴费', |
|---|
| | | Value: 198, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '深圳', |
|---|
| | | value: 2100 |
|---|
| | | ID: 4, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 3, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '广州', |
|---|
| | | value: 1577 |
|---|
| | | ID: 5, |
|---|
| | | Name: '本月缴费', |
|---|
| | | Value: 22, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '成都', |
|---|
| | | value: 1625 |
|---|
| | | ID: 6, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 0.3, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '厦门', |
|---|
| | | value: 857 |
|---|
| | | ID: 7, |
|---|
| | | Name: '今日实时', |
|---|
| | | Value: 198, |
|---|
| | | Unit: '笔', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '郑州', |
|---|
| | | value: 1322 |
|---|
| | | ID: 8, |
|---|
| | | Name: '缴费金额', |
|---|
| | | Value: 198, |
|---|
| | | Unit: '万元', |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ], |
|---|
| | | carousel: 'single', |
|---|
| | | unit: '辆' |
|---|
| | | }, |
|---|
| | | intervalInstance: 0 |
|---|
| | | }); |
|---|
| | | const getOverViewList = () => { |
|---|
| | | const iconList = [ |
|---|
| | | 'biaodan', |
|---|
| | | 'putong', |
|---|
| | | 'zhongduancanshuchaxun', |
|---|
| | | 'shidu', |
|---|
| | | 'fuwenbenkuang', |
|---|
| | | 'fuwenben', |
|---|
| | | 'jiliandongxuanzeqi', |
|---|
| | | 'jinridaiban', |
|---|
| | | 'gongju', |
|---|
| | | ]; |
|---|
| | | state.annualPayment.forEach((annual, index) => { |
|---|
| | | annual.Icon = iconList[index]; |
|---|
| | | annual.BgColor = randomHexColor(); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | //随机生成颜色 |
|---|
| | | const randomHexColor = () => { |
|---|
| | | return `#${Math.floor(Math.random() * 16777215) |
|---|
| | | .toString(16) |
|---|
| | | .padEnd(6, '0')}`; |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | // getOverViewList(); |
|---|
| | | window.addEventListener('resize', () => { |
|---|
| | | demoOverViewChart.value.resize(); |
|---|
| | | }); |
|---|
| | | initOverViewEchart() |
|---|
| | | }); |
|---|
| | | const initOverViewEchart = () => { |
|---|
| | | var chartDom = document.getElementById('pond'); |
|---|
| | | var myChart = echarts.init(chartDom); |
|---|
| | | demoOverViewChart.value=myChart |
|---|
| | | var option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | // text: '76%',//主标题文本 |
|---|
| | | subtext: '76%',//副标题文本 |
|---|
| | | left: 'center', |
|---|
| | | |
|---|
| | | top:'42%', |
|---|
| | | textStyle: { |
|---|
| | | fontSize: 38, |
|---|
| | | color: '#454c5c', |
|---|
| | | align: 'center' |
|---|
| | | }, |
|---|
| | | subtextStyle: { |
|---|
| | | fontFamily: "微软雅黑", |
|---|
| | | fontSize: 16, |
|---|
| | | color: '#6c7a89', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | |
|---|
| | | dataList: [ |
|---|
| | | { |
|---|
| | | name: 'Access From', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'center' |
|---|
| | | title: '今日累计销量', |
|---|
| | | value: 755, |
|---|
| | | config: { |
|---|
| | | number: [755], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '本周累计销量', |
|---|
| | | value: 3288, |
|---|
| | | config: { |
|---|
| | | number: [3288], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '本月累计销量', |
|---|
| | | value: 14222, |
|---|
| | | config: { |
|---|
| | | number: [14222], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '季度累计销量', |
|---|
| | | value: 41022, |
|---|
| | | config: { |
|---|
| | | number: [41022], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '年度累计销量', |
|---|
| | | value: 176888, |
|---|
| | | config: { |
|---|
| | | number: [176888], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '今日目标销量', |
|---|
| | | value: 820, |
|---|
| | | config: { |
|---|
| | | number: [820], |
|---|
| | | toFixed: 0, |
|---|
| | | content: '{nt}', |
|---|
| | | textAlign: 'left', |
|---|
| | | style: { |
|---|
| | | fontSize: 24, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | completeObj: { |
|---|
| | | data: [45, 56], |
|---|
| | | shape: 'round', |
|---|
| | | }, |
|---|
| | | rankList: { |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: '武汉市', |
|---|
| | | value: 1210, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '北京', |
|---|
| | | value: 1655, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '上海', |
|---|
| | | value: 1788, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '深圳', |
|---|
| | | value: 2100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '广州', |
|---|
| | | value: 1577, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '成都', |
|---|
| | | value: 1625, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '厦门', |
|---|
| | | value: 857, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '郑州', |
|---|
| | | value: 1322, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | carousel: 'single', |
|---|
| | | unit: '辆', |
|---|
| | | }, |
|---|
| | | intervalInstance: 0, |
|---|
| | | }); |
|---|
| | | const getOverViewList = () => { |
|---|
| | | const iconList = [ |
|---|
| | | 'biaodan', |
|---|
| | | 'putong', |
|---|
| | | 'zhongduancanshuchaxun', |
|---|
| | | 'shidu', |
|---|
| | | 'fuwenbenkuang', |
|---|
| | | 'fuwenben', |
|---|
| | | 'jiliandongxuanzeqi', |
|---|
| | | 'jinridaiban', |
|---|
| | | 'gongju', |
|---|
| | | ]; |
|---|
| | | state.annualPayment.forEach((annual, index) => { |
|---|
| | | annual.Icon = iconList[index]; |
|---|
| | | annual.BgColor = randomHexColor(); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | //随机生成颜色 |
|---|
| | | const randomHexColor = () => { |
|---|
| | | return `#${Math.floor(Math.random() * 16777215) |
|---|
| | | .toString(16) |
|---|
| | | .padEnd(6, '0')}`; |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | // getOverViewList(); |
|---|
| | | window.addEventListener('resize', () => { |
|---|
| | | demoOverViewChart.value.resize(); |
|---|
| | | }); |
|---|
| | | initOverViewEchart(); |
|---|
| | | }); |
|---|
| | | const initOverViewEchart = () => { |
|---|
| | | var chartDom = document.getElementById('pond'); |
|---|
| | | var myChart = echarts.init(chartDom); |
|---|
| | | demoOverViewChart.value = myChart; |
|---|
| | | var option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | // text: '76%',//主标题文本 |
|---|
| | | subtext: '76%', //副标题文本 |
|---|
| | | left: 'center', |
|---|
| | | |
|---|
| | | top: '42%', |
|---|
| | | textStyle: { |
|---|
| | | fontSize: 38, |
|---|
| | | color: '#454c5c', |
|---|
| | | align: 'center', |
|---|
| | | }, |
|---|
| | | subtextStyle: { |
|---|
| | | fontFamily: '微软雅黑', |
|---|
| | | fontSize: 16, |
|---|
| | | color: '#6c7a89', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'Access From', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['40%', '70%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | fontSize: 40, |
|---|
| | | fontWeight: 'bold' |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | position: 'center', |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | fontSize: 40, |
|---|
| | | fontWeight: 'bold', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { value: 1048, name: 'Search Engine' }, |
|---|
| | | { value: 735, name: 'Direct' }, |
|---|
| | | { value: 580, name: 'Email' }, |
|---|
| | | { value: 484, name: 'Union Ads' }, |
|---|
| | | { value: 300, name: 'Video Ads' }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { value: 1048, name: 'Search Engine' }, |
|---|
| | | { value: 735, name: 'Direct' }, |
|---|
| | | { value: 580, name: 'Email' }, |
|---|
| | | { value: 484, name: 'Union Ads' }, |
|---|
| | | { value: 300, name: 'Video Ads' } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | |
|---|
| | | option && myChart.setOption(option); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | option && myChart.setOption(option); |
|---|
| | | } |
|---|
| | | return { state }; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | return { state }; |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | App.component('Decoration3', Decoration3) |
|---|
| | | App.use(ElementPlus); |
|---|
| | | App.mount('#overview') |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | | App.component('Decoration3', Decoration3); |
|---|
| | | App.use(ElementPlus); |
|---|
| | | App.mount('#overview'); |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
