vue饼图

转载

mb5fdcae83766b7 2021-08-25 16:32:00

结果图

vue饼图_i++

原型

  1 <template>
  2   <!-- 左右柱状图 -->
  3   <div ref="rankEcharts" :style="{ height: height, width: width }" />
  4 </template>
  5 <script>
  6 import echarts from 'echarts'
  7 require('echarts/theme/macarons')
  8 import resize from '@/views/chart/mixins/resize.js'
  9 export default {
 10   mixins: [resize],
 11   props: {
 12     width: {
 13       type: String,
 14       default: '100%'
 15     },
 16     height: {
 17       type: String,
 18       default: '350px'
 19     },
 20     // 标题
 21     title: {
 22       type: String,
 23       default: ''
 24     },
 25     scatterData: {
 26       type: Array,
 27       default: () => []
 28     }
 29   },
 30   data() {
 31     return {
 32       chart: null,
 33       loading: false,
 34       isShowThisEcharts: true
 35     }
 36   },
 37   beforeDestroy() {
 38     if (!this.chart) {
 39       return
 40     }
 41     this.chart.dispose()
 42     this.chart = null
 43   },
 44   mounted() {
 45     this.initChart()
 46   },
 47   methods: {
 48     initChart() {
 49       this.chart = echarts.init(this.$refs.rankEcharts)
 50       // 装载echarts图
 51       var data = this.scatterData
 52       this.chart.clear()
 53       this.chart.setOption(
 54         {
 55           color: ['#FFB614', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', 'rgba(250,250,250,0.3)'],
 56           title: {
 57             text: this.title,
 58             padding: 20,
 59             textStyle: {
 60               fontSize: 18,
 61               fontStyle: 'normal',
 62               fontWeight: 'normal'
 63             }
 64           },
 65           grid: {
 66             bottom: 150,
 67             left: 100,
 68             right: '10%'
 69           },
 70           legend: {
 71             orient: 'vertical',
 72             top: 'middle',
 73             right: '5%',
 74             icon: 'roundRect',
 75             data: data
 76           },
 77           series: [
 78 
 79             // 主要展示层的
 80             {
 81               radius: ['30%', '50%'],
 82               center: ['50%', '50%'],
 83               type: 'pie',
 84               label: {
 85                 normal: {
 86                   show: true,
 87                   formatter: '{c}%',
 88                   textStyle: {
 89                     fontSize: 30
 90 
 91                   },
 92                   position: 'outside'
 93                 },
 94                 emphasis: {
 95                   show: true
 96                 }
 97               },
 98               labelLine: {
 99                 normal: {
100                   show: true,
101                   length: 30,
102                   length2: 55
103                 },
104                 emphasis: {
105                   show: true
106                 }
107               },
108               name: '民警训练总量',
109               data: data
110 
111             },
112             // 边框的设置
113             {
114               radius: ['30%', '34%'],
115               center: ['50%', '50%'],
116               type: 'pie',
117               label: {
118                 normal: {
119                   show: false
120                 },
121                 emphasis: {
122                   show: false
123                 }
124               },
125               labelLine: {
126                 normal: {
127                   show: false
128                 },
129                 emphasis: {
130                   show: false
131                 }
132               },
133               animation: false,
134               tooltip: {
135                 show: false
136               },
137               data: [{
138                 value: 1,
139                 itemStyle: {
140                   color: 'rgba(250,250,250,0.3)'
141                 }
142               }]
143             }, {
144               name: '外边框',
145               type: 'pie',
146               clockWise: false,
147               hoverAnimation: false,
148               center: ['50%', '50%'],
149               radius: ['65%', '65%'],
150               label: {
151                 normal: {
152                   show: false
153                 }
154               },
155               data: [{
156                 value: 9,
157                 name: '',
158                 itemStyle: {
159                   normal: {
160                     borderWidth: 2,
161                     borderColor: ''
162                   }
163                 }
164               }]
165             }
166           ]
167         }
168       )
169     }
170   }
171 }
172 </script>
173 
174 <style scoped>
175 </style>

引用

<template>
  <div v-loading="inLoading" class="list-table" style="position:relative;height:350px;">
    <div class="choiceYear">
      <el-select v-model="choiceYear" :placeholder="$t('请选择')" size="mini" style="width: 80px;" @change="initInflow">
        <el-option
          v-for="item in yearOptions"
          :key="item.value + new Date().getTime()"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <Histogram v-if="showInRankEcharts" :title="$t('投资余额结构')" :scatter-data="scatterData" :row-value="rowInValue" />
  </div>
</template>

<script>
import Histogram from '@/views/company/bankFlowWaterAnalysis/columnar/Histogram.vue'
import { getRecordYear, financialBalance } from '@/api/company/bankFlowWaterAnalysis/WaterAnalysis.js'
export default {
  components: {
    Histogram
  },
  data() {
    return {
      inLoading: false,
      outLoading: false,
      scatterData: [],
      rowInValue: [],
      floatingInContent: [],
      showInRankEcharts: false,
      rowOutContext: [],
      rowOutValue: [],
      floatingOutContent: [],
      showOutRankEcharts: false,
      yearOptions: [],
      choiceYear: ''
    }
  },
  created() {
    this.initData()
  },
  mounted() {
  },
  methods: {
    initData() {
      getRecordYear({}).then(response => {
        this.yearOptions = response.data
        this.choiceYear = response.data[0].value
        this.initInflow()
      })
    },
    initInflow() {
      this.inLoading = true
      this.showInRankEcharts = false
      financialBalance({ companyId: this.$route.query.companyId, years: this.choiceYear }).then(response => {
        if (response.data.code === 200) {
          this.scatterData = response.data.list
        }
        this.showInRankEcharts = true
        this.inLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>

1 // 理财余额结构
2 export function financialBalance(query) {
3   return request({
4     url: '/company/bankFlowWaterAnalysis/financialBalance',
5     method: 'get',
6     params: query
7   })
8 }

controller

1     /**
2      * 投资理财流入流出
3      */
4     @ApiOperation(value="理财余额结构" ,notes="作者:lgw")
5     @GetMapping("/financialBalance")
6     @Log(title = "理财余额结构", businessType = BusinessType.LIST)
7     public AjaxResult financialBalance(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
8         return AjaxResult.success(bankFlowWaterAnalysisService.financialBalance(bankFlowWaterAnalysis));
9     }

service

  1  /**
  2      * 投资分析流入流出
  3      * @param bankFlowWaterAnalysis
  4      */
  5     public Map<String, Object> investmentAnalysisInAndOutflow(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
  6         Map<String, Object> result = new HashMap<>();
  7         result.put("code", 200);
  8         result.put("msg", "操作成功!");
  9 
 10         if (StringUtils.isBlank(bankFlowWaterAnalysis.getCompanyId())) {
 11             result.put("code", 500);
 12             result.put("msg", "未获取当前公司");
 13             return result;
 14         }
 15         if(StringUtils.isBlank(bankFlowWaterAnalysis.getYears())){
 16             int year = Calendar.getInstance().get(Calendar.YEAR);
 17             bankFlowWaterAnalysis.setYears(String.valueOf(year));
 18         }
 19         //定义标签类型
 20         List<String> labelType=new ArrayList<>();
 21         labelType.add("银行");
 22         labelType.add("期货");
 23         labelType.add("基金");
 24         labelType.add("券商");
 25         labelType.add("其他");
 26         labelType.add("信托");
 27         //查询数据库
 28         List<BankFlowWaterAnalysis> inflow = bankFlowWaterAnalysisDao.investmentAnalysisInflow(bankFlowWaterAnalysis);
 29         //定义一个BigDecimal类型的零，方便后面比较，赋值的使用
 30         BigDecimal zero =new BigDecimal(0);
 31         // 判断查处的数据是否为空
 32         if (StringUtils.isEmpty(inflow)){
 33             // 如果为空的话，就new一个对象并将流入的值设置成零
 34             for (int i = 0; i < labelType.size(); i++) {
 35                 inflow.add(new BankFlowWaterAnalysis());
 36                 inflow.get(i).setTotalInflow(zero);
 37             }
 38         }else {
 39             //定义一个set集合，因为set集合是有序的
 40             Set<String> mArr = new HashSet<>();
 41             //将查到的标签类型放到set集合中
 42             for (BankFlowWaterAnalysis m: inflow) {
 43                 mArr.add(m.getLabelType());
 44             }
 45             //如果查到的labelType不包含定义的labelType  就将缺少的labelType 添加到查出的结果集中
 46             for (int i = 0; i < labelType.size(); i++) {
 47                 if (!mArr.contains(labelType.get(i))){
 48                     inflow.add(i,new BankFlowWaterAnalysis());
 49                 }
 50             }
 51             // 循环获取流入的值，如果为空的话 就设置成零
 52             for (int i = 0; i <inflow.size() ; i++) {
 53                 BigDecimal totalInflow = inflow.get(i).getTotalInflow();
 54                 if (totalInflow == null){
 55                     inflow.get(i).setTotalInflow(zero);
 56                 }
 57             }
 58         }
 59         //流出  详细说明与上文流入雷同
 60         List<BankFlowWaterAnalysis> outflow = bankFlowWaterAnalysisDao.investmentAnalysisOutflow(bankFlowWaterAnalysis);
 61         if (StringUtils.isEmpty(outflow)){
 62             for (int i = 0; i <labelType.size() ; i++) {
 63                 outflow.add(new BankFlowWaterAnalysis());
 64                 outflow.get(i).setTotalOutflow(zero);
 65             }
 66         }else {
 67             Set<String> mArr = new HashSet<>();
 68             for (BankFlowWaterAnalysis m: outflow) {
 69                 mArr.add(m.getLabelType());
 70             }
 71             for (int i = 0; i < labelType.size(); i++) {
 72                 if (!mArr.contains(labelType.get(i))){
 73                     outflow.add(i,new BankFlowWaterAnalysis());
 74                 }
 75             }
 76             for (int i = 0; i <outflow.size() ; i++) {
 77                 BigDecimal totalOutflow = outflow.get(i).getTotalOutflow();
 78                 if (totalOutflow == null){
 79                     outflow.get(i).setTotalOutflow(zero);
 80                 }
 81             }
 82         }
 83         result.put("labelType", labelType);
 84         result.put("inflow", inflow);
 85         result.put("outflow", outflow);
 86         return result;
 87     }
 88 
 89     /**
 90      * 理财余额结构
 91      * @param bankFlowWaterAnalysis
 92      */
 93     public Map<String, Object> financialBalance(BankFlowWaterAnalysis bankFlowWaterAnalysis) {
 94 
 95         Map<String, Object> result = new HashMap<>();
 96         result.put("code", 200);
 97         result.put("msg", "操作成功!");
 98 
 99         if (StringUtils.isBlank(bankFlowWaterAnalysis.getCompanyId())) {
100             result.put("code", 500);
101             result.put("msg", "未获取当前公司");
102             return result;
103         }
104         if(StringUtils.isBlank(bankFlowWaterAnalysis.getYears())){
105             int year = Calendar.getInstance().get(Calendar.YEAR);
106             bankFlowWaterAnalysis.setYears(String.valueOf(year));
107         }
108         // 定义 sum算总和，zoro 判读和赋值 ， hundred做乘数，subtract提高作用域，resultList用来存放name和value
109         BigDecimal sum =new BigDecimal(0);
110         BigDecimal zero =new BigDecimal(0);
111         BigDecimal hundred = new BigDecimal(100);
112         BigDecimal subtract;
113         List<Map<String,Object>> resultList = new ArrayList<>();
114         //调用流入流出的方法
115         Map<String, Object> stringObjectMap = this.investmentAnalysisInAndOutflow(bankFlowWaterAnalysis);
116         // 得到标签类型
117         List<String> labelType = (List<String>) stringObjectMap.get("labelType");
118         // 得到流入数据
119         List<BankFlowWaterAnalysis> inflow = (List<BankFlowWaterAnalysis>) stringObjectMap.get("inflow");
120         // 得到流出数据
121         List<BankFlowWaterAnalysis> outflow = (List<BankFlowWaterAnalysis>) stringObjectMap.get("outflow");
122         // 根据标签类型的长度循环得到 每个流入流出数据
123         for (int i = 0; i <labelType.size() ; i++) {
124             BigDecimal totalInflow = inflow.get(i).getTotalInflow();
125             BigDecimal totalOutflow = outflow.get(i).getTotalOutflow();
126             // 流出的绝对值减去流入的绝对值得到一个差
127             subtract = totalOutflow.abs().subtract(totalInflow.abs());
128             // 如果差小于零就将它改成0
129             int j = subtract.compareTo(BigDecimal.ZERO);
130             if (j<0){
131                 subtract = zero;
132             }
133             // 将所有的差值相加得到一个总数
134             sum = sum.add(subtract);
135         }
136 
137         for (int i = 0; i <labelType.size() ; i++) {
138             BigDecimal totalInflow = inflow.get(i).getTotalInflow();
139             BigDecimal totalOutflow = outflow.get(i).getTotalOutflow();
140             subtract = totalOutflow.abs().subtract(totalInflow.abs());
141             int j = subtract.compareTo(BigDecimal.ZERO);
142             if (j<0){
143                 subtract = zero;
144             }
145             // 如果 sum等于0 就将每一个name对应value 设置成0 否则就获取到当前标签类型对应的value
146             if (sum.equals(zero)){
147                 Map<String, Object> list = new HashMap<>();
148                 list.put("name",labelType.get(i));
149                 list.put("value",zero);
150                 resultList.add(list);
151             }else {
152                 BigDecimal divide = subtract.divide(sum, 2, RoundingMode.HALF_UP);
153                 BigDecimal multiply = divide.multiply(hundred);
154                 Map<String, Object> list = new HashMap<>();
155                 list.put("name",labelType.get(i));
156                 list.put("value",multiply);
157                 resultList.add(list);
158             }
159         }
160         result.put("list", resultList);
161         return result;
162     }

dao

1     /**
2      * 投资理财流出
3      * @param bankFlowWaterAnalysis
4      */
5     public List<BankFlowWaterAnalysis> investmentAnalysisOutflow(BankFlowWaterAnalysis bankFlowWaterAnalysis);

/**
 * 投资理财流出
 * @param bankFlowWaterAnalysis
 */
public List<BankFlowWaterAnalysis> investmentAnalysisOutflow(BankFlowWaterAnalysis bankFlowWaterAnalysis);

xml

 1     <select id="investmentAnalysisInflow" parameterType="String" resultType="com.anxin.company.bankFlowWaterAnalysis.entity.BankFlowWaterAnalysis">
 2              SELECT
 3              substring( a.transaction_hour, 1, 7 ) AS 'years',
 4              sum(a.transaction_amount)  AS 'totalInflow' ,
 5              CASE
 6              WHEN c.dict_label='银行' THEN '银行'
 7              WHEN c.dict_label='券商' THEN '券商'
 8              WHEN c.dict_label='信托' THEN '信托'
 9              WHEN c.dict_label='期货' THEN '期货'
10              WHEN c.dict_label='基金' THEN '基金'
11              ELSE '其他'
12             END 'labelType'
13             FROM
14              bank_flow_main_record a
15              LEFT JOIN bank_flow_label b ON b.parent_id = a.id
16              LEFT JOIN bank_flow_dict c ON b.dict_value = c.id
17             WHERE
18              a.transaction_amount <![CDATA[ >= ]]> 0
19              AND a.company_id =#{companyId}
20              AND substring( a.transaction_hour, 1, 4 ) = #{years}
21              AND c.dict_label IN ( '银行','券商', '信托' ,'期货','基金','投资机构','资管公司')
22              AND(
23                 a.trading_summary LIKE '%理财%'
24                 OR a.trading_summary LIKE '%投资%'
25                 OR a.trading_summary LIKE '%赎回%'
26                 OR a.trading_summary LIKE '%收益%'
27             )
28             GROUP BY
29             3
30             ORDER BY
31             3
32             DESC
33     </select>
34 
35     <select id="investmentAnalysisOutflow" parameterType="String" resultType="com.anxin.company.bankFlowWaterAnalysis.entity.BankFlowWaterAnalysis">
36              SELECT
37              substring( a.transaction_hour, 1, 7 ) AS 'years',
38              sum(a.transaction_amount)  AS 'totalOutflow' ,
39              CASE
40              WHEN c.dict_label='银行' THEN '银行'
41              WHEN c.dict_label='券商' THEN '券商'
42              WHEN c.dict_label='信托' THEN '信托'
43              WHEN c.dict_label='期货' THEN '期货'
44              WHEN c.dict_label='基金' THEN '基金'
45              ELSE '其他'
46             END 'labelType'
47             FROM
48              bank_flow_main_record a
49              LEFT JOIN bank_flow_label b ON b.parent_id = a.id
50              LEFT JOIN bank_flow_dict c ON b.dict_value = c.id
51             WHERE
52              a.transaction_amount <![CDATA[ < ]]> 0
53              AND a.company_id =#{companyId}
54              AND substring( a.transaction_hour, 1, 4 ) = #{years}
55              AND c.dict_label IN ( '银行','券商', '信托' ,'期货','基金','投资机构','资管公司')
56              AND(
57                 a.trading_summary LIKE '%理财%'
58                 OR a.trading_summary LIKE '%投资%'
59                 OR a.trading_summary LIKE '%赎回%'
60                 OR a.trading_summary LIKE '%收益%'
61              )
62              GROUP BY
63              3
64              ORDER BY
65              3
66             DESC
67     </select>