supervise/base-ui/src/views/risk/thresholdAnalysis.vue

<template>
  <div class="app-container">
    <div style="margin-left:16px;">
      <h3>{{ name }}</h3>
    </div>
    <div class = "current-data">
      <div class = "upper">
      </div>

      <div ref="charta" class ="lower"  /></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: '阀值分析',
    // components: {  },
    data() {
      return {
        currentDate:"2023-01-01",
        name: '阀值分析',
        myCharta: null,
      }
    },
    created() {
      // 初始化变量
      // this.init()
      // 加载列表
      // this.getList()
    },
    beforeDestroy() {
      if (this.myCharta) {
        this.myCharta.dispose()
        this.myCharta = null
      }
    },
    mounted() {
      this.$nextTick(() => {
      // this.initChartaThreshold()
      this.initCharta()
      })
    },
    methods: {
      initCharta() {
        // 基于准备好的dom，初始化echarts实例
        // this.myChartaThreshold = echarts.init(this.$refs.myChartaThreshold)
        this.myCharta = echarts.init(this.$refs.charta)
        this.myCharta.setOption(
          {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: false, readOnly: false },
                magicType: { show: false, type: ['line', 'bar'] },
                restore: { show: false },
                saveAsImage: { show: false }
              }
            },
            legend: {
              data: ['仓库货值', '在途货值', ' 门店货值', '帐户余额', '应收帐款', '借款金额', '阀值']
            },
            xAxis: [
              {
                type: 'category',
                data: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05', '2023-01-06', '2023-01-07'],
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '人民币',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value} 元'
                }
              },
              {
                type: 'value',
                name: '百分比',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value} '
                }
              }
            ],
            series: [
              {
                name: '仓库货值',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 元';
                  }
                },
                data: [
                  2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
              },
              {
                name: '在途货值',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 元';
                  }
                },
                data: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: ' 门店货值',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 元';
                  }
                },
                data: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: '帐户余额',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 元';
                  }
                },
                data: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: '应收帐款',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 元';
                  }
                },
                data: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: '借款金额',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '元';
                  }
                },
                data: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: '阀值',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '%';
                  }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
              },

            ]
          }
        )
      },
      getList() {},
      // 返回
      handleReturn() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style>
  .current-data{
    width:100%;
    height:500px;
  }

  .current-data .upper{
    width:100%;
    height:100px;
  }

  .current-data .lower{
    width:100%;
    height:600px;
    float: left;
    margin-left: 10px;

  }
</style>