vue饼图
结果图
原型
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>
js
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>
注：往前端传的是一个map，map中有两个值，一个key是name，一个是value，这两个key值是固定的，必须是name和value，否则无效。
dao.xml中的 GROUP BY 3 ORDER BY 3 这两个3指的都是 select后的第三个属性
