| | |
| | | <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_price">¥{{chatData.settleClaimsTotalFee || ''}}</div> |
| | | <div class="box_chart_item_tu" style="height: 132px" id="tu1"></div> |
| | | </div> |
| | | <div class="box_chart_item"> |
| | |
| | | <span>总理赔案件数</span> |
| | | <i class="el-icon-info"></i> |
| | | </div> |
| | | <div class="box_chart_item_price">1,234</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"> |
| | |
| | | <span>平均理赔处理时长</span> |
| | | <i class="el-icon-info"></i> |
| | | </div> |
| | | <div class="box_chart_item_price">10.5天</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_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> |
| | |
| | | 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 () { |
| | |
| | | { |
| | | title: '多次出险', |
| | | num: 0, |
| | | percentage: 0, |
| | | color: '#EF4444', |
| | | backgroundColor: '#FEF2F2' |
| | | }, |
| | | { |
| | | title: '重复报案', |
| | | num: 0, |
| | | percentage: 0, |
| | | color: '#d6f7e5', |
| | | backgroundColor: '#FFF7ED' |
| | | }, |
| | | { |
| | | 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' |
| | | }, |
| | |
| | | color: '#9333EA', |
| | | backgroundColor: '#FAF5FF' |
| | | } |
| | | ] |
| | | ], |
| | | info: null, |
| | | chatData: null |
| | | } |
| | | }, |
| | | created () { |
| | | this.$nextTick(() => { |
| | | this.setChart1() |
| | | this.setChart2() |
| | | this.setChart3() |
| | | this.setChartLipeijine() |
| | | this.setChartDiqu() |
| | | this.setChartAnjianleixing() |
| | | this.setChartShiguleixing() |
| | | this.setChartJieanlv() |
| | | this.setChartGonghzong() |
| | | this.setChartNianlin() |
| | | this.setChartWord() |
| | | }) |
| | | 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 () { |
| | | setChartLipeijine (xData, yData) { |
| | | const chartDom = document.getElementById('tuLipeijine') |
| | | const myChart = echarts.init(chartDom) |
| | | const option = this.getBarOption(['2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03', '2025-04'], |
| | | [1320, 1322, 1031, 1344, 950, 2360, 210,1320, 1322, 1031, 1344, 950],'#5470c5') |
| | | const option = this.getBarOption(xData, yData,'#5470c5') |
| | | option && myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartDiqu () { |
| | | 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 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', |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartAnjianleixing () { |
| | | setChartAnjianleixing (data) { |
| | | const chartDom = document.getElementById('tuAnjianleixing') |
| | | const myChart = echarts.init(chartDom) |
| | | const option = { |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [{ value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' }, |
| | | { value: 484, name: 'Union Ads' }, |
| | | { value: 300, name: 'Video Ads' }], |
| | | data, |
| | | type: 'pie', |
| | | areaStyle: {}, |
| | | smooth: true |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartShiguleixing () { |
| | | setChartShiguleixing (indicator, value) { |
| | | if (indicator.length === 0) return; |
| | | var chartDom = document.getElementById('tuShiguleixing'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option = { |
| | | // legend: { |
| | | // data: ['Allocated Budget', 'Actual Spending'] |
| | | // }, |
| | | radar: { |
| | | // shape: 'circle', |
| | | indicator: [ |
| | | {name: '交通事故', max: 16500}, |
| | | {name: '工地受伤', max: 16000}, |
| | | {name: '意外受伤', max: 30000}, |
| | | {name: '其他事故', max: 38000}, |
| | | {name: '医疗事故', max: 52000}, |
| | | {name: '自然灾害', max: 25000} |
| | | ] |
| | | indicator |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | |
| | | type: 'radar', |
| | | data: [ |
| | | { |
| | | value: [4200, 3000, 20000, 35000, 50000, 18000], |
| | | value, |
| | | name: '' |
| | | } |
| | | ] |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartJieanlv () { |
| | | setChartJieanlv (xData, yData) { |
| | | const chartDom = document.getElementById('tuJieanlv') |
| | | const myChart = echarts.init(chartDom) |
| | | const option = this.getLineOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'rgba(207,58,24,0.83)') |
| | | const option = this.getLineOption(xData, yData,'rgba(207,58,24,0.83)') |
| | | option && myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartGonghzong () { |
| | | setChartGonghzong (dataX, dataY) { |
| | | var chartDom = document.getElementById('tuGongzhong'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option = { |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'] |
| | | data: dataX |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | itemStyle: { |
| | | color: '#f6d68d' |
| | | }, |
| | | data: [18203, 23489, 29034, 104970, 131744, 630230] |
| | | data: dataY |
| | | } |
| | | ] |
| | | } |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartNianlin () { |
| | | setChartNianlin (dataX, dataY) { |
| | | const chartDom = document.getElementById('tuNianlin') |
| | | const myChart = echarts.init(chartDom) |
| | | const option = this.getBarOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'#80d3ff') |
| | | const option = this.getBarOption(dataX, dataY,'#80d3ff') |
| | | option && myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChartWord () { |
| | | setChartWord (data) { |
| | | // const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA'] |
| | | const myChart = echarts.init(document.getElementById('wordchart')) |
| | | var option = { |
| | |
| | | // } |
| | | // }, |
| | | // data格式是一个数组 |
| | | data: [{ |
| | | name: '红色', |
| | | value: 200 |
| | | }, |
| | | { |
| | | name: '蓝色', |
| | | value: 300 |
| | | }, |
| | | { |
| | | name: '测试', |
| | | value: 600 |
| | | }, |
| | | { |
| | | name: '重大事故', |
| | | value: 500 |
| | | data |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | |
| | | } |
| | | myChart.setOption(option) |
| | | }, |
| | | setChart1 () { |
| | | setChart1 (xdata, ydata) { |
| | | const chartDom = document.getElementById('tu1') |
| | | const myChart = echarts.init(chartDom) |
| | | var ydata = [2, 7, 3, 12, 16, 9, 6] |
| | | var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | const option = this.getLineOption(xdata,ydata,'#50A850') |
| | | option && myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChart2 () { |
| | | setChart2 (xdata, ydata) { |
| | | const chartDom = document.getElementById('tu2') |
| | | const myChart = echarts.init(chartDom) |
| | | var ydata = [2, 7, 3, 12, 16, 9, 6] |
| | | var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | const option = this.getLineOption(xdata,ydata,'#f07e6f') |
| | | option && myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | setChart3 () { |
| | | setChart3 (xdata, ydata) { |
| | | const chartDom = document.getElementById('tu3') |
| | | const myChart = echarts.init(chartDom) |
| | | var ydata = [2, 7, 3, 12, 16, 9, 6] |
| | | var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | const option = this.getLineOption(xdata,ydata,'#8951be') |
| | | option && myChart.setOption(option) |
| | | window.addEventListener('resize', function () {//执行 |