git ch

k94314517

2025-07-04 50fb58286ed3b718c39a97e0987ee7561a295651

 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;
              }
            }
        }
    }