vue+echarts写个桑基图

vue+echarts写个桑基图

<template>
  <div>
    <aui-layout>
        <aui-row style="margin:10px;">
            <aui-col :span="4">
                <aui-cascader v-model="value" :options="options" @change="handleChange" style="width:100%;"></aui-cascader>
            </aui-col>
            <aui-col :span="12">
                <v-chart ref="barChart" :options="san" theme="walden" style="width:1160px;height:710px;" />
            </aui-col>
        </aui-row>
    </aui-layout>
  </div>
</template>

<script>
import { Row, Col, Layout } from '@aurora/ui'
import {data} from './sum'
import httpAjax from "../../http/httpAjax"
import { Cascader } from '@aurora/vue'
import space from '../../mixins/space'
export default {
    components: {
        AuiCascader: Cascader
    },
    mixins:[space],
    data(){
        return {
            san:{},
            chartData:data,//请求的数据
            save:[],//过滤后的数据
            business_line:{},//对应map的数据
            map:{},//行业线map
            value:'',
            options:[],
        }
    },
    mounted(){
        // this.setSan()
        this.request()
    },
    methods:{
        setSan(){
            let data = this.chartData
            this.san = {
                title: {
                    subtext: '桑基图',
                    left: 'center'
                },
                series:[
                    {
                        type: "sankey",
                        left: 50.0,
                        top: 20.0,
                        right: 150.0,
                        bottom: 25.0,
                        lineStyle: {
                            color: "source",
                            curveness: 0.5
                        },
                        itemStyle: {
                            color: "#1f77b4",
                            borderColor: "#1f77b4"
                        },
                        label: {
                            color: "rgba(0,0,0,0.7)",
                            fontFamily: "Arial",
                            fontSize: 10
                        },
                        data:data.nodes,
                        links:data.links
                    }
                ],
                tooltip: {
                    trigger: "item"
                }
            }
        },
        // 取数据
        async request() {
            let result = await httpAjax.callDisApiByServiceCode("CNBG_LAR_HR_EmployeeBizlineHistory", null, this.$service) 
            let save = result.filter(obj=>obj.cnt>=4)
            this.save = save.filter(obj=>obj.rank<=4)
            // 过滤不合格数据
            let org = new Map()
            let arr = []
            this.save.map(obj=>{
                if(obj.businesstypename.length==0){
                    org.set(obj.employeenumber,1)
                }
            })
            this.save.map(obj=>{
                if(!org.has(obj.employeenumber)){
                    arr.push(obj)
                }
            })
            this.save = arr
            // 取中文
            for(let i=0;i<this.save.length;i++){
                let obj = this.save[i]
                if(obj.businesstypename.length>0){
                    this.save[i].businesstypename = obj.businesstypename.split('/')[0]
                }
            }
            this.set_business_line()
        },
        // 做行业线
        set_business_line(){
            let arr = [];
            this.save.map(obj=>arr.push(obj.business_line))
            let business_line = this.arr_map(arr)
            this.options = business_line.map(e=>{
                return {
                    label:e,
                    value:e,
                    children:[]
                }
            })
            this.map = this.arrToMap(business_line)
            this.business_map()
        },
        // 做三级联动数据分类二级
        business_map(){
            for(let i=0;i<this.map.size;i++){
                let key = this.map.get(i)
                let value = this.save.filter(e=>e.business_line == key)
                let arr = []
                value.map(e=>arr.push(e.businesstypename))
                arr = this.arr_map(arr)
                let option = arr.map(ob=>{
                    return {label:ob,value:ob}
                })
                this.options.map((r,x)=>{
                    if(r.value == key){
                        this.options[x].children = option
                    }
                })
            }
        },
        // 筛选数据
        handleChange(value){
            // 匹配的人
            let arr = this.selectPerson(value[1],1,this.save)
            this.chartDataFilter(arr)
        },
        /**
         *  @param {String} value 关键词，对应businesstypename
         *  @param {Number} rank 次数，对应数据rank
         *  @param {JSON} save 人员详细
         */
        selectPerson(value,rank,save){
            let res = save.filter(e=>e.rank==rank&&e.businesstypename == value)
            let arr = []
            res.map((obj)=>{
                this.save.map(ob=>{
                    if(obj.employeenumber==ob.employeenumber&&ob.rank<=(rank+1)&&ob.rank>=rank){
                        arr.push(ob)
                    }
                })
            })
            return arr
        },
        /**
         *  @param {JSON} data 人员详细数据
         *  @param {JSON} link 需要生成的数据
         *  @param {Array} businesstypename echarts所需的职业列表
         *  @param {Number} cl 递归时对应rank算到了哪个级别
         */
        linkSet(data,link,businesstypename,cl){
            cl++;
            data.map(obj=>{
                // 每个人
                let person = data.filter(e=>e.employeenumber==obj.employeenumber)
                businesstypename.push(person[1].rank+'-'+person[1].businesstypename)
                businesstypename.push(person[0].rank+'-'+person[0].businesstypename)
                link.push(person[1].rank+'-'+person[1].businesstypename+"---"+person[0].rank+'-'+person[0].businesstypename)
                if(obj.rank==cl&&cl<4){
                    let arr = this.selectPerson(obj.businesstypename,cl,data)
                    this.linkSet(arr,link,businesstypename,cl)
                }
            })
        },
        // chart数据过滤
        chartDataFilter(data){
            let businesstypename = []
            let link = []
            let cl = 1
            this.linkSet(data,link,businesstypename,cl)
            businesstypename = this.arr_map(businesstypename)
            // echarts职业列表样式
            let arr = businesstypename.map(e=>{
                // 随机色
                let color = this.color()
                return {
                    "name": e,
                    "itemStyle": {
                        "normal": {
                            "color": color,
                            "borderColor": color
                        }
                    }
                }
            })
            let linkArr = link
            const mp = new Map();
            let linkXm = []
            // console.log('linkArr',linkArr.length)
            linkArr.map(obj=>{
                // 根据重复次数统计人数
                let i = 1
                linkArr.map(e=>{
                    if(obj==e) i++
                    
                })
                if(!mp.has(obj)){
                    mp.set(obj,1)
                    linkXm.push({'source':obj.split('---')[0],'target':obj.split('---')[1],value:1*i})
                }
            })
            this.chartData['nodes'] = arr
            this.chartData['links'] = linkXm
            this.setSan()
        },
         //颜色对象
        color(){
            let r = Math.floor(Math.random()*255);
            let g = Math.floor(Math.random()*255);
            let b = Math.floor(Math.random()*255);
            return 'rgba('+ r +','+ g +','+ b +',0.8)';
        },
        // 数组去重
        arr_map(arr){
            const res = new Map();
            return arr.filter((a) => !res.has(a) && res.set(a, 1))
        },
        // 数组转map
        arrToMap(arr){
            const arrChangeMap = (arr) => new Map(arr.map( (value,key) => [key,value]));
            return arrChangeMap(arr)
        }

    }
}
</script>

<style scoped>

</style>