From 50fb58286ed3b718c39a97e0987ee7561a295651 Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期五, 04 七月 2025 17:56:41 +0800
Subject: [PATCH] git ch
---
company/src/views/business/dataBoard.vue | 843 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 667 insertions(+), 176 deletions(-)
diff --git a/company/src/views/business/dataBoard.vue b/company/src/views/business/dataBoard.vue
index 352342f..3782f90 100644
--- a/company/src/views/business/dataBoard.vue
+++ b/company/src/views/business/dataBoard.vue
@@ -1,276 +1,741 @@
<template>
<div class="box">
<div class="box_shua">
- <el-button icon="el-icon-refresh" type="primary">鍒锋柊鏁版嵁</el-button>
+ <el-button icon="el-icon-refresh" type="primary" @click="getChatData(),getData()">鍒锋柊鏁版嵁</el-button>
</div>
<div class="box_head">
<div class="box_head_info">
<i class="el-icon-info"></i>
<span>灞曠ず褰撳墠绯荤粺鍚堣鎬绘暟锛屾瘡澶╂洿鏂版暟鎹�</span>
</div>
- <div class="box_head_list">
+ <div class="box_head_list" v-if="info">
<div class="box_head_list_item">
<div class="box_head_list_item_top">
<span>淇濋櫓鍏徃鏁�</span>
- <span>鏈湀 +3</span>
+ <span>鏈湀 +{{info.insuranceAddTotal}}</span>
</div>
- <div class="box_head_list_item_bottom">32</div>
+ <div class="box_head_list_item_bottom">{{info.insuranceTotal}}</div>
</div>
<div class="box_head_list_item">
<div class="box_head_list_item_top">
<span>淇濆崟鏁�</span>
- <span>鏈湀 +12</span>
+ <span>鏈湀 +{{info.insuranceApplyAddTotal}}</span>
</div>
- <div class="box_head_list_item_bottom">88</div>
+ <div class="box_head_list_item_bottom">{{info.insuranceApplyTotal}}</div>
</div>
<div class="box_head_list_item">
<div class="box_head_list_item_top">
<span>鍦ㄤ繚浜烘暟</span>
- <span>鏈湀 +300</span>
+ <span>鏈湀 +{{info.insuranceUserAddTotal}}</span>
</div>
- <div class="box_head_list_item_bottom">2,000</div>
+ <div class="box_head_list_item_bottom">{{info.insuranceUserTotal}}</div>
</div>
<div class="box_head_list_item">
<div class="box_head_list_item_top">
<span>宸叉敹璐圭敤鍚堣</span>
- <span>鏈湀 +813,789.00</span>
+ <span>鏈湀 +{{info.totalAddFee}}</span>
</div>
- <div class="box_head_list_item_bottom">楼6,345,654.00</div>
+ <div class="box_head_list_item_bottom">楼{{info.totalFee}}</div>
</div>
</div>
</div>
- <div class="box_chart">
+ <div class="box_chart" v-if="chatData">
<div class="box_chart_item">
<div class="box_chart_item_info">
<span>鎬荤悊璧旈噾棰�</span>
<i class="el-icon-info"></i>
</div>
- <div class="box_chart_item_price">楼2,345,654.00</div>
- <div class="box_chart_item_tu" id="tu1"></div>
+ <div class="box_chart_item_price">楼{{chatData.settleClaimsTotalFee || ''}}</div>
+ <div class="box_chart_item_tu" style="height: 132px" id="tu1"></div>
</div>
<div class="box_chart_item">
<div class="box_chart_item_info">
<span>鎬荤悊璧旀浠舵暟</span>
<i class="el-icon-info"></i>
</div>
- <div class="box_chart_item_price">1,234</div>
- <div class="box_chart_item_tu" id="tu2"></div>
+ <div class="box_chart_item_price">{{chatData.settleClaimsTotal || ''}}</div>
+ <div class="box_chart_item_tu" style="height: 132px" id="tu2"></div>
</div>
<div class="box_chart_item">
<div class="box_chart_item_info">
<span>骞冲潎鐞嗚禂澶勭悊鏃堕暱</span>
<i class="el-icon-info"></i>
</div>
- <div class="box_chart_item_price">10.5澶�</div>
- <div class="box_chart_item_tu" id="tu3"></div>
+ <div class="box_chart_item_price">{{chatData.averageSettleClaimsTime || ''}}澶�</div>
+ <div class="box_chart_item_tu" style="height: 132px" id="tu3"></div>
</div>
</div>
- <div class="box_shuju">
+ <div class="box_shuju" v-if="chatData">
<div class="box_shuju_item">
<div class="box_shuju_item_top">
<span>鍙楃悊鐜�</span>
<i class="el-icon-info"></i>
</div>
- <div class="box_shuju_item_bottom">95.3%</div>
+ <div class="box_shuju_item_bottom">{{chatData.acceptanceRata}}%</div>
</div>
<div class="box_shuju_item">
<div class="box_shuju_item_top">
<span>鎷掕禂鐜�</span>
<i class="el-icon-info"></i>
</div>
- <div class="box_shuju_item_bottom">12.8%</div>
+ <div class="box_shuju_item_bottom">{{chatData.refuseRata}}%</div>
</div>
<div class="box_shuju_item">
<div class="box_shuju_item_top">
<span>缁撴鐜�</span>
<i class="el-icon-info"></i>
</div>
- <div class="box_shuju_item_bottom">88.9%</div>
+ <div class="box_shuju_item_bottom">{{chatData.closeCaseRata}}%</div>
</div>
</div>
<div class="box_content">
<div class="box_content_left">
<div class="box_content_left_title">椋庨櫓妗堜欢鐩戞帶</div>
<div class="box_content_left_list">
- <div class="box_content_left_list_item" :style="{ backgroundColor: item.backgroundColor }" v-for="(item, index) in list" :key="index">
- <div class="box_content_left_list_item_top">
+ <div class="box_content_left_list_item" :style="{ backgroundColor: item.title!= ''? item.backgroundColor :'#fff'}" v-for="(item, index) in list" :key="index">
+ <div class="box_content_left_list_item_top" v-if="item.title != ''" >
<span>{{item.title}}</span>
<span :style="{ color: item.color }">{{item.num}}</span>
</div>
- <div class="box_content_left_list_item_bottom">
+ <div class="box_content_left_list_item_bottom" v-if="item.title!= ''">
<span>杈冧笂鏈�</span>
<div class="box_content_left_list_item_bottom_lv">
- 8.3%
+ {{item.percentage}}%
</div>
</div>
</div>
</div>
</div>
<div class="box_content_right">
- <div class="box_content_right_title">椋庨櫓妗堜欢鐩戞帶</div>
+ <div class="box_content_right_title">椋庨櫓妗堜欢鏁忔劅璇�</div>
+ <div class="box_chart_item_tu" id="wordchart"></div>
</div>
</div>
+ <div class="box_chart" style="height: 500px">
+ <div class="box_chart_item" style=" width:59%;height: 100%">
+ <div class="box_content_right_title" style="width: 100%;display: flex">
+ <div style="flex: 1">鐞嗚禂閲戦瓒嬪娍</div>
+<!-- <div style="flex: 1; text-align: right">
+ <span :class="dateType == 0?'seldatetype':'datetype'" @click="changeDataType(0)">杩戜竴鏈�</span>
+ <span :class="dateType == 1?'seldatetype':'datetype'" @click="changeDataType(1)">杩戜竴骞�</span>
+ </div>-->
+ </div>
+ <div class="box_chart_item_tu" id="tuLipeijine" style="width: 100%;height: 90%" ></div>
+ </div>
+ <div class="box_chart_item" style=" width: 40%;height: 100%" >
+ <div class="box_content_right_title" >
+ <span>鍦板尯鍒嗗竷</span>
+ </div>
+ <div class="box_chart_item_tu" style="width: 100%;height: 100%" id="tuDiqu"></div>
+ </div>
+ </div>
+ <div class="box_chart" >
+ <div class="box_chart_item" style="height: 400px">
+ <div class="box_content_right_title">
+ <span>鍚勭被鍨嬫浠跺垎甯�</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuAnjianleixing"></div>
+ </div>
+ <div class="box_chart_item" style="height: 400px">
+ <div class="box_content_right_title">
+ <span>浜嬫晠绫诲瀷鍒嗗竷</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuShiguleixing"></div>
+ </div>
+ <div class="box_chart_item" style="height: 400px">
+ <div class="box_content_right_title">
+ <span>缁撴鐜囧垎鏋�</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuJieanlv"></div>
+ </div>
+ </div>
+ <div class="box_chart">
+ <div class="box_chart_item" style=" width: 49.5%;height: 400px;">
+ <div class="box_content_right_title" >
+ <span>宸ョ鍑洪櫓TOP10</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuGongzhong"></div>
+ </div>
+ <div class="box_chart_item" style=" width: 49.5%;height: 400px;">
+ <div class="box_content_right_title">
+ <span>鍑洪櫓浜哄勾榫勫垎甯�</span>
+ </div>
+ <div class="box_chart_item_tu" id="tuNianlin"></div>
+ </div>
+ </div>
</div>
</template>
<script>
- import * as echarts from 'echarts'
- export default {
- name: "dataBoard",
- data() {
- return {
- list: [
- {
- title: '澶氭鍑洪櫓',
- num: 0,
- color: '#EF4444',
- backgroundColor: '#FEF2F2'
- },
- {
- title: '閲嶅鎶ユ',
- num: 0,
- color: '#EA580C',
- backgroundColor: '#FFF7ED'
- },
- {
- title: '绱㈣禂杩囧',
- num: 0,
- color: '#CA8A04',
- backgroundColor: '#FEFCE8'
- },
- {
- title: '澶氭鍑洪櫓',
- num: 0,
- color: '#2563EB',
- backgroundColor: '#EFF6FF'
- },
- {
- title: '鏂板憳宸ュ嚭闄�',
- num: 0,
- color: '#9333EA',
- backgroundColor: '#FAF5FF'
- },
- {
- title: '寤惰繜鎶ユ',
- num: 0,
- color: '#4F46E5',
- backgroundColor: '#EEF2FF'
- }
- ]
- }
+import * as echarts from 'echarts'
+import 'echarts-wordcloud'
+import chinaJSON from '@/assets/china.json'
+import { getInsuranceDataVO, getSettleClaimsDataVO } from '@/api/business/settleRisk'
+export default {
+ name: 'dataBoard',
+ data () {
+ return {
+ dateType:0,
+ list: [
+ {
+ title: '澶氭鍑洪櫓',
+ num: 0,
+ percentage: 0,
+ color: '#EF4444',
+ backgroundColor: '#FEF2F2'
},
- created() {
- this.$nextTick(() => {
- this.setChart1()
- this.setChart2()
- this.setChart3()
- })
+ {
+ title: '閲嶅鎶ユ',
+ num: 0,
+ percentage: 0,
+ color: '#d6f7e5',
+ backgroundColor: '#FFF7ED'
},
- methods: {
- setChart1() {
- const chartDom = document.getElementById('tu1')
- const myChart = echarts.init(chartDom)
- let option
- option = {
- grid: {
- left: '3%',
- right: '3%',
- top: '10%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [2, 7, 3, 12, 16, 9, 6],
- type: 'line',
- areaStyle: {},
- smooth: true
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
- setChart2() {
- const chartDom = document.getElementById('tu2')
- const myChart = echarts.init(chartDom)
- let option
- option = {
- grid: {
- left: '3%',
- right: '3%',
- top: '10%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [2, 7, 3, 12, 16, 9, 6],
- type: 'line',
- areaStyle: {},
- smooth: true
- }
- ]
- }
-
- option && myChart.setOption(option)
- },
- setChart3() {
- const chartDom = document.getElementById('tu3')
- const myChart = echarts.init(chartDom)
- let option
- option = {
- grid: {
- left: '3%',
- right: '3%',
- top: '10%',
- bottom: '0%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [2, 7, 3, 12, 16, 9, 6],
- type: 'line',
- areaStyle: {},
- smooth: true
- }
- ]
- }
-
- option && myChart.setOption(option)
- }
+ {
+ title: '绱㈣禂杩囧',
+ num: 0,
+ percentage: 0,
+ color: '#CA8A04',
+ backgroundColor: '#FEFCE8'
+ },
+ {
+ title: '鏂板憳宸ュ嚭闄�',
+ num: 0,
+ percentage: 0,
+ color: '#3ea570',
+ backgroundColor: '#d6f7e5'
+ },
+ {
+ title: '鏁忔劅璇�',
+ num: 0,
+ percentage: 0,
+ color: '#2563EB',
+ backgroundColor: '#EFF6FF'
+ },
+ {
+ title: '寤惰繜鎶ユ',
+ num: 0,
+ percentage: 0,
+ color: '#4F46E5',
+ backgroundColor: '#EEF2FF'
+ },
+ {
+ title: '鏂板憳宸ヤ繚闅滄潯娆�',
+ num: 0,
+ percentage: 0,
+ color: '#9333EA',
+ backgroundColor: '#FAF5FF'
+ },
+ {
+ title: '',
+ num: 0,
+ color: '#9333EA',
+ backgroundColor: '#FAF5FF'
}
+ ],
+ info: null,
+ chatData: null
}
+ },
+ created () {
+ this.getData()
+ this.getChatData()
+ },
+ methods: {
+ getChatData() {
+ getSettleClaimsDataVO()
+ .then(res => {
+ this.chatData = res
+ let arr1_x = res.settleClaimsTotalList.map(item => item.dataFirst)
+ let arr1_y = res.settleClaimsTotalList.map(item => item.dataSecond)
+
+ let arr2_x = res.settleClaimsFeeList.map(item => item.dataFirst)
+ let arr2_y = res.settleClaimsFeeList.map(item => item.dataSecond)
+
+ let arr3_x = res.averageSettleClaimsList.map(item => item.dataFirst)
+ let arr3_y = res.averageSettleClaimsList.map(item => item.dataSecond)
+
+ let arr4 = res.sensitiveDataList ? res.sensitiveDataList.map(item => {
+ return {
+ name: item.dataFirst,
+ value: item.dataSecond
+ }
+ }) : []
+
+ this.list[0].num = res.riskTimesCxTotal
+ this.list[0].percentage = res.riskTimesCxRata
+
+ this.list[1].num = res.riskRepeatTotal
+ this.list[1].percentage = res.riskRepeatRata
+
+ this.list[2].num = res.riskTimesSpTotal
+ this.list[2].percentage = res.riskTimesSpRata
+
+ this.list[3].num = res.riskNewUserTotal
+ this.list[3].percentage = res.riskNewUserRata
+
+ this.list[4].num = res.riskSensitiveTotal
+ this.list[4].percentage = res.riskSensitiveRata
+
+ this.list[5].num = res.riskDelayUnitTotal
+ this.list[5].percentage = res.riskDelayUnitRata
+
+ this.list[6].num = res.riskUnTakeEffectTotal
+ this.list[6].percentage = res.riskUnTakeEffectRata
+
+ let arr5_x = res.monthTotalMoneyDataList.map(item => item.dataFirst)
+ let arr5_y = res.monthTotalMoneyDataList.map(item => item.dataSecond)
+
+ let arr6 = res.caseTypeDataList ? res.caseTypeDataList.map(item => {
+ return {
+ name: item.dataFirst,
+ value: item.dataSecond
+ }
+ }) : []
+
+ let arr7_x = res.typeDataList ? res.typeDataList.map(item => {
+ return {
+ name: item.dataFirst
+ }
+ }) : []
+ let arr7_y = res.typeDataList ? res.typeDataList.map(item => Number(item.dataSecond)) : []
+
+ let arr8_x = res.closeRataDataList.map(item => item.dataFirst)
+ let arr8_y = res.closeRataDataList.map(item => Number(item.dataSecond))
+
+ let arr9_x = res.workTypeDataList.map(item => item.dataFirst)
+ let arr9_y = res.workTypeDataList.map(item => Number(item.dataSecond))
+
+ let arr10_x = res.memberAgeDataList.map(item => item.dataFirst)
+ let arr10_y = res.memberAgeDataList.map(item => Number(item.dataSecond))
+
+ let arr11_x = res.areaDataList ? res.areaDataList.map(item => {
+ return {
+ name: item.dataFirst,
+ code: item.dataThird,
+ value: item.dataThird
+ }
+ }) : []
+
+ this.$nextTick(() => {
+ this.setChart1(arr1_x, arr1_y)
+ this.setChart2(arr2_x, arr2_y)
+ this.setChart3(arr3_x, arr3_y)
+ this.setChartWord(arr4)
+ this.setChartLipeijine(arr5_x, arr5_y)
+ this.setChartAnjianleixing(arr6)
+ this.setChartShiguleixing(arr7_x, arr7_y)
+ this.setChartJieanlv(arr8_x, arr8_y)
+ this.setChartGonghzong(arr9_x, arr9_y)
+ this.setChartNianlin(arr10_x, arr10_y)
+ this.setChartDiqu(arr11_x)
+ })
+ })
+ },
+ getData() {
+ getInsuranceDataVO()
+ .then(res => {
+ this.info = res
+ })
+ },
+ changeDataType(type){
+ this.dateType = type
+ },
+ setChartLipeijine (xData, yData) {
+ const chartDom = document.getElementById('tuLipeijine')
+ const myChart = echarts.init(chartDom)
+ const option = this.getBarOption(xData, yData,'#5470c5')
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartDiqu (mapData) {
+ const chartDom = document.getElementById('tuDiqu')
+ const myChart = echarts.init(chartDom)
+ echarts.registerMap('china', chinaJSON)
+ // const mapData = [
+ // { name: '鍖椾含甯�', code: '110000', value: 100 },
+ // { name: '澶╂触甯�', code: '120000', value: 200 },
+ // { name: '涓婃捣甯�', code: '310000', value: 300 },
+ // { name: '閲嶅簡甯�', code: '500000', value: 400 },
+ // { name: '娌冲寳鐪�', code: '130000', value: 500 },
+ // { name: '娌冲崡鐪�', code: '410000', value: 600 },
+ // { name: '浜戝崡鐪�', code: '530000', value: 10 },
+ // { name: '杈藉畞鐪�', code: '210000', value: 20 },
+ // { name: '榛戦緳姹熺渷', code: '230000', value: 30 },
+ // { name: '婀栧崡鐪�', code: '430000', value: 40 },
+ // { name: '瀹夊窘鐪�', code: '340000', value: 60 },
+ // { name: '灞变笢鐪�', code: '370000', value: 50 },
+ // { name: '鏂扮枂缁村惥灏旇嚜娌诲尯', code: '650000', value: 70 },
+ // { name: '姹熻嫃鐪�', code: '320000', value: 10 },
+ // { name: '娴欐睙鐪�', code: '330000', value: 20 },
+ // { name: '姹熻タ鐪�', code: '360000', value: 30 },
+ // { name: '婀栧寳鐪�', code: '420000', value: 40 },
+ // { name: '骞胯タ澹棌鑷不鍖�', code: '450000', value: 0 },
+ // { name: '鐢樿們鐪�', code: '620000', value: 0 },
+ // { name: '灞辫タ鐪�', code: '140000', value: 0 },
+ // { name: '鍐呰挋鍙よ嚜娌诲尯', code: '150000', value: 0 },
+ // { name: '闄曡タ鐪�', code: '610000', value: 0 },
+ // { name: '鍚夋灄鐪�', code: '220000', value: 0 },
+ // { name: '绂忓缓鐪�', code: '350000', value: 0 },
+ // { name: '璐靛窞鐪�', code: '520000', value: 0 },
+ // { name: '骞夸笢鐪�', code: '440000', value: 0 },
+ // { name: '闈掓捣鐪�', code: '630000', value: 0 },
+ // { name: '瑗胯棌鑷不鍖�', code: '540000', value: 0 },
+ // { name: '瀹佸鍥炴棌鑷不鍖�', code: '640000', value: 0 },
+ // { name: '鍥涘窛鐪�', code: '510000', value: 0 },
+ // { name: '瀹佸鐪�', code: '640000', value: 0 },
+ // { name: '娴峰崡鐪�', code: '460000', value: 0 },
+ // { name: '鍙版咕鐪�', code: '710000', value: 0 },
+ // { name: '棣欐腐鐗瑰埆琛屾斂鍖�', code: '810000', value: 0 },
+ // { name: '婢抽棬鐗瑰埆琛屾斂鍖�', code: '820003', value: 0 },
+ // { name: '鍗楁捣璇稿矝', code: '', value: 0 }
+ // ]
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c}'
+ },
+ // toolbox: {
+ // show: true,
+ // orient: 'vertical',
+ // left: 'right',
+ // top: 'center',
+ // feature: {
+ // dataView: { readOnly: false },
+ // restore: {},
+ // saveAsImage: {}
+ // }
+ // },
+ visualMap: {
+ top: 100,
+ left: 'right',
+ // min: 0,
+ // max: 50000,
+ // text: ['High', 'Low'],
+ // realtime: false,
+ calculable: true,
+ show: false,
+ inRange: {
+ color: ['lightskyblue', 'yellow', 'orangered']
+ }
+ },
+ series: [
+ {
+ name: '鍦板尯鍒嗗竷',
+ type: 'map',
+ map: 'china',
+ label: {
+ show: true
+ },
+ data: mapData
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartAnjianleixing (data) {
+ const chartDom = document.getElementById('tuAnjianleixing')
+ const myChart = echarts.init(chartDom)
+ const option = {
+ grid: {
+ left: '3%',
+ right: '3%',
+ top: '10%',
+ bottom: '0%',
+ containLabel: true
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{time|{c} }',
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'right'
+ },
+ series: [
+ {
+ data,
+ type: 'pie',
+ areaStyle: {},
+ smooth: true
+ }
+ ]
+ }
+
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartShiguleixing (indicator, value) {
+ if (indicator.length === 0) return;
+ var chartDom = document.getElementById('tuShiguleixing');
+ var myChart = echarts.init(chartDom);
+ var option = {
+ radar: {
+ indicator
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [
+ {
+ name: '浜嬫晠绫诲瀷鍒嗗竷',
+ type: 'radar',
+ data: [
+ {
+ value,
+ name: ''
+ }
+ ]
+ }
+ ]
+ }
+ option && myChart.setOption(option);
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartJieanlv (xData, yData) {
+ const chartDom = document.getElementById('tuJieanlv')
+ const myChart = echarts.init(chartDom)
+ const option = this.getLineOption(xData, yData,'rgba(207,58,24,0.83)')
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartGonghzong (dataX, dataY) {
+ var chartDom = document.getElementById('tuGongzhong');
+ var myChart = echarts.init(chartDom);
+ var option = {
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value'
+ // boundaryGap: [0, 0.01]
+ },
+ yAxis: {
+ type: 'category',
+ data: dataX
+ },
+ series: [
+ {
+ name: '2025',
+ type: 'bar',
+ itemStyle: {
+ color: '#f6d68d'
+ },
+ data: dataY
+ }
+ ]
+ }
+ option && myChart.setOption(option);
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartNianlin (dataX, dataY) {
+ const chartDom = document.getElementById('tuNianlin')
+ const myChart = echarts.init(chartDom)
+ const option = this.getBarOption(dataX, dataY,'#80d3ff')
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChartWord (data) {
+ // const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA']
+ const myChart = echarts.init(document.getElementById('wordchart'))
+ var option = {
+ backgroundColor: '#fff',
+ series: [
+ {
+ type: 'wordCloud',
+ sizeRange: [15, 70], // 鐢ㄦ潵璋冩暣瀛楃殑澶у皬鑼冨洿
+ rotationRange: [0, 0], // 姣忎釜璇嶆棆杞殑瑙掑害鑼冨洿鍜屾棆杞殑姝ヨ繘
+ rotationStep: 45,
+ gridSize: 10, // 鐢ㄦ潵璋冩暣璇嶄箣闂寸殑璺濈
+ shape: 'pentagon', // shape杩欎釜灞炴�ц櫧鐒跺彲閰嶇疆锛屼絾鏄湪璇嶇殑鏁伴噺涓嶅お澶氱殑鏃跺�欙紝鏁堟灉涓嶆槑鏄撅紝瀹冧細瓒嬪悜浜庣敾涓�涓き鍦�
+ // 浣嶇疆鐨勯厤缃�
+ width: '100%',
+ height: '100%',
+ drawOutOfBound: false, // 鍏佽璇嶅お澶х殑鏃跺�欙紝瓒呭嚭鐢诲竷鐨勮寖鍥�
+ layoutAnimation: true, // 甯冨眬鐨勬椂鍊欐槸鍚︽湁鍔ㄧ敾
+ textStyle: {
+ // 棰滆壊鍙互鐢ㄤ竴涓嚱鏁版潵杩斿洖瀛楃涓诧紝杩欓噷鏄殢鏈鸿壊
+ /* color: function (v) {
+ const index = Math.floor(Math.random() * color.length)
+ return color[index]
+ }, */
+ fontFamily: 'sans-serif',
+ fontWeight: 'bold',
+ // Color鍙互鏄竴涓洖璋冨嚱鏁版垨涓�涓鑹插瓧绗︿覆
+ color: function () {
+ // Random color
+ return 'rgb(' + [
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160),
+ Math.round(Math.random() * 160)
+ ].join(',') + ')'
+ }
+ },
+ // 鍒掕繃娣诲姞鐨勯槾褰憋紝鍥犱负鎴戜笉闇�瑕侊紝鍥犳娉ㄩ噴浜�
+ // emphasis: {
+ // focus: 'self',
+ // textStyle: {
+ // textShadowBlur: 10,
+ // textShadowColor: '#333'
+ // }
+ // },
+ // data鏍煎紡鏄竴涓暟缁�
+ data
+ }
+ ]
+ }
+ myChart.setOption(option)
+ },
+ setChart1 (xdata, ydata) {
+ const chartDom = document.getElementById('tu1')
+ const myChart = echarts.init(chartDom)
+ const option = this.getLineOption(xdata, ydata,'#50A850')
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChart2 (xdata, ydata) {
+ const chartDom = document.getElementById('tu2')
+ const myChart = echarts.init(chartDom)
+ const option = this.getLineOption(xdata,ydata,'#f07e6f')
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ setChart3 (xdata, ydata) {
+ const chartDom = document.getElementById('tu3')
+ const myChart = echarts.init(chartDom)
+ const option = this.getLineOption(xdata,ydata,'#8951be')
+ option && myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ },
+ getBarOption(xd,yd,color){
+ const option = {
+ grid: {
+ left: '3%',
+ right: '3%',
+ top: '10%',
+ bottom: '0%',
+ containLabel: true
+ },
+ legend: {},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ // boundaryGap: false,
+ data: xd,
+ axisLabel: {
+ interval: 1 //
+ }
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ emphasis: {
+ focus: 'series'
+ },
+ data: yd,
+ type: 'bar',
+ itemStyle: {
+ color: color || '#f07e6f'
+ },
+ smooth: true
+ }
+ ]
+ }
+ return option
+ },
+ getLineOption(xd,yd,color){
+ const option = {
+ grid: {
+ left: '3%',
+ right: '3%',
+ top: '10%',
+ bottom: '0%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {},
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: xd
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: yd,
+ type: 'line',
+ areaStyle: {
+ opacity: 0.5,
+ color: color || '#f07e6f'
+ },
+ lineStyle: {
+ color: color || '#f07e6f'
+ },
+ smooth: true
+ }
+ ]
+ }
+ return option
+ }
+ }
+}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
- padding: 0 10px;
+ padding: 0 10px 30px 10px;
+
box-sizing: border-box;
.box_shua {
width: 100%;
@@ -342,6 +807,22 @@
align-items: center;
justify-content: space-between;
margin-top: 15px;
+ .datetype{
+ cursor: pointer;
+ color: #8c939d;
+ margin-right: 10px;
+ padding: 2px 10px;
+ font-size: 14px;
+ border: solid 1px #8c939d;
+ }
+ .seldatetype{
+ cursor: pointer;
+ color: #3170fe;
+ margin-right: 10px;
+ padding: 2px 10px;
+ font-size: 14px;
+ border: solid 1px #3170fe;
+ }
.box_chart_item {
width: 32.5%;
height: 225px;
@@ -359,6 +840,12 @@
margin-right: 5px;
}
}
+ .box_content_right_title {
+ font-weight: bold;
+ font-size: 16px;
+ color: #101010;
+ margin-bottom: 15px;
+ }
.box_chart_item_price {
color: rgba(16,16,16,1);
font-size: 22px;
@@ -367,7 +854,7 @@
}
.box_chart_item_tu {
width: 100%;
- height: 130px;
+ height: 90%;
}
}
}
@@ -432,7 +919,7 @@
align-items: center;
justify-content: space-between;
.box_content_left_list_item {
- width: 32%;
+ width: 24%;
height: 94px;
padding: 16px 20px;
box-sizing: border-box;
@@ -487,6 +974,10 @@
color: #101010;
margin-bottom: 15px;
}
+ .box_chart_item_tu {
+ width: 100%;
+ height: 130px;
+ }
}
}
}
--
Gitblit v1.9.3