可视化图表（ECharts、orgchart）

最新推荐文章于 2024-05-26 09:57:59 发布

tian-happy

最新推荐文章于 2024-05-26 09:57:59 发布

阅读量1.2k

点赞数

分类专栏：前端语法文章标签： echarts 树结构

本文链接：https://blog.csdn.net/sinat_38011533/article/details/119574888

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

语法

7 篇文章 0 订阅

订阅专栏

一、ECharts

官网：https://echarts.apache.org/examples/zh/index.html

常用的饼图、柱状图、关系图

html中js文件引入:

<link type="text/javascript" src="../eCharts-4/eCharts4.js" />

<link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link type="text/javascript" src="../eCharts-4/eCharts4.js" />
    <link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" />
</head>
<body>
    <div class="chartBox">
        <!--echarts必须给宽高，不然不显示-->
        <div style="width:50%;heigth:400px" id="chart1"></div>//实心圆
        <div style="width:50%;heigth:400px" id="chart2"></div>//空心圆
        <div style="width:50%;heigth:400px" id="chart3"></div>//组-柱形图
        <div style="width:50%;heigth:400px" id="chart4"></div>//关系图1
        <div style="width:50%;heigth:400px;display:flex;justify-content:center" id="chart5"></div>//关系图1 
    </div>
</body>
</html>

1.1 饼图(实心)

function circleData(){
    $.get('linkUrl',{id:id},function(res){
        if(res.code == '0'){
            var data = res.data;
            // 规整数据，如果返回数据不合要求需要修改
            var pieData = [
                {value:data['合理'], name:'合理'},
                {value:data['不合理'], name:'不合理'}
            ];
            let option = {
                color:['#357754','#5470c6'], // 不指定颜色随机
                backgroundColor:'rgba(0,0,0,0.2)',
                // 鼠标hover效果
                tooltip:{
                    trigger:'item',
                    formatter:"{b}:{c}个({d}%)", //效果是不合理：6个(100%)
                    // 其他形式
                    /*formatter：function(params){
                        return params.value
                    }*/
                },
                title:{
                    text:'全责一至机构占比',
                    top:'bottom',
                    left:'center',
                    textStyle:{
                        fontSize:16,
                        fontWeight:'',
                        color:'#333'
                    }
                },
                series:[
                    {
                        type:'pie',
                        radius:'50%',
                        data:pieData,
                        emphasis:{
                            itemStyle:{
                                borderWidth:0,
                                shadowBlue:10,
                                shadowOffsetX:0,
                                shadowColor:'rgba(0,0,0,0.5)'
                            }
                        },
                        labelLine:{
                            normal:{
                                show:true
                            }
                        }
                    }
                ]
            };
            // 基于准备好的dom，初始化echarts实例
            var mychart = echarts.init(document.getElementById('chart1'));
            mychart.clear();
            // 使用刚指定的配置项和数据显示图表
            mychart.setOption(option)
        }
    })
};
// 调用
circleData();

1.2 空心圆

function doubleCircleData(){
    $.get('linkUrl',{id:id},function(res){
        if(res.code == '0'){
            var data = res.data;
            // 规整数据，如果返回数据不合要求需要修改
            var pieData = [
                {value:data['无效导调'], name:'无效导调'},
                {value:data['无反馈导调'], name:'无反馈导调'},
                {value:data['导调'], name:'导调'},
            ];
            let option = {
                color:['#357754','#5470c6','#0000ff'], // 不指定颜色随机
                backgroundColor:'rgba(0,0,0,0.2)',
                // 鼠标hover效果
                tooltip:{
                    trigger:'item',
                    formatter:"{b}:{c}个({d}%)", //效果是无效导调：6个(60%)
                    // 其他形式
                    /*formatter：function(params){
                        return params.value
                    }*/
                },
                title:{
                    text:'全责一至机构占比',
                    top:'bottom',
                    left:'center',
                    textStyle:{
                        fontSize:16,
                        fontWeight:'',
                        color:'#333'
                    }
                },
                series:[
                    {
                        type:'pie',
                        center:['50%','50%'],
                        radius:['30%','55%'], //内外圆大小
                        itemStyle:{   // 饼图边框颜色与粗细
                            borderWidth:1,
                            borderColor:'#fff',
                        },
                        emphasis:{
                            itemStyle:{
                                borderWidth:0,
                                shadowBlue:10,
                                shadowOffsetX:0,
                                shadowColor:'rgba(0,0,0,0.5)'
                            }
                        },
                        label:{   //饼图上的线显示的内容
                            formatter:"{b}:{c}条",
                            padding:[0, -10],
                            fontSize:14,
                        },
                        labelLine:{
                            normal:{
                                show:true
                            }
                        },
                        data:pieData
                    }
                ]
            };
            // 基于准备好的dom，初始化echarts实例
            var mychart = echarts.init(document.getElementById('chart2'));
            mychart.clear();
            // 使用刚指定的配置项和数据显示图表
            mychart.setOption(option)
        }
    })
};
// 调用
doubleCircleData();

1.3柱状图(两个一组对比)

function variedBarData(){
    $.get('linkUrl',{id:id},function(res){
        if(res.code == '0'){
            var data = res.data;
            var organizationList = [];  // 组名列表
            var notComplianceList = [];  // 组内不合理数据列表
            var ComplianceList = [];  // 组内合理数据列表
            // 规整数据，如果返回数据不合要求需要修改
            $.each(data,function(i,v){
                organizationList.push(v["organizationList_name"]);
                notComplianceList.push(v["notComplianceList"]);
                ComplianceList.push(v["ComplianceList"]);
            })
            let option = {
                backgroundColor:'rgba(0,0,0,0.2)',
                // 鼠标hover效果
                tooltip:{
                    trigger:'item',
                    formatter:"{b}-{a}:{c}个",//效果是xxxx-不合理：6个(柱形图没有{d}百分比)
                    // 其他形式
                    /*formatter：function(params){
                        return params.value
                    }*/
                },
                xAxis:{
                    type:'category',
                    data:organizationList ,
                },
                yAxis:{
                    type:'value'
                },
                title:{
                    text:'全责一至排序',
                    top:'bottom',
                    left:'center',
                    textStyle:{
                        fontSize:16,
                        fontWeight:'',
                        color:'#333'
                    }
                },
                series:[
                    {
                        name:'不合理',
                        type:'bar',
                        data: notComplianceList,
                        color:"#357754"
                    },{
                        name:'合理',
                        type:'bar',
                        data: ComplianceList,
                        color:"#5470c6"
                    },
                ]
            };
            // 基于准备好的dom，初始化echarts实例
            var mychart = echarts.init(document.getElementById('chart3'));
            mychart.clear();
            // 使用刚指定的配置项和数据显示图表
            mychart.setOption(option)
        }
    })
};
// 调用
variedBarData();

1.4关系图

function initActualRelationshipChart(){
    $.get('linkUrl',{id:sendData},function(res){
        if(res.code == 0){
            //判断返回数据标识 动态设置线条颜色
            $.each(res.data.heatSeekDtoList, function(i,v){
                if(v.val == '0'){
                    v.lineStyle = {
                        color:"#ff0000"
                    }
                }else{
                    v.lineStyle = {
                        color:"#35a3f8"
                    }
                }
            });
            var option = {
                 series:[
                    {
                        name:'实际指挥关系',
                        type:'graph',
                        layout:'force',
                        force:{
                            repulsion:550,
                            gravity:0.1
                        },
                        draggable:true,
                        roam:true,
                        fousNodeAdjacency:true,
                        animation:false,
                        label:{
                            show:true
                        },
                        zoom:1,
                        edgeSymbol:['circle','arrow'],
                        edgeSymbolSize:[4,10],
                        edgeLabel:{
                            show:false
                        },
                        symbolSize:30,
                        data:res.data.heatSeekDataDtoList,
                        links:res.data.heatSeekDtoList,
                        itemStyle:{
                            color:'#f87535'
                        },
                        lineStyle:{
                            width:3,
                            curveness:0.1
                        }
                    }
                ]
            };
            // 基于准备好的dom，初始化echarts实例
            var mychart = echarts.init(document.getElementById('chart4'));
            mychart.clear();
            // 使用刚指定的配置项和数据显示图表
            mychart.setOption(option)
             mychart.off('click');
            //点击事件
            mychart.on('click',function(params){
                var source = params.source;
                var target = params.target;
                // 重载表格
                table.reload("table的id",{
                    url:"tableUrl",
                    where:{source:source?source:'',target:target},
                })
            })
        }
    })
}
initActualRelationshipChart();

二、orgchart

官网地址：https://www.jq22.com/jquery-info21894

js需要先扩充模块，再调用

layui.config({
    base:'./layui-v2.5.6/lay/modules'
}).extend({
    orgChart:'orgChart'
});
layui.use(['jquery','orgchart'], function(){
    var $ = layui.jquery;
    var orgchart = layui.orgchart;
    // 通过缓存获取数据
    var taskId = sessionStorage.getItem("taskId");
    // 创建缓存：sessionStorage.setItem("conductId","taskId");
    // 销毁缓存：sessionStorage.removeItem("taskId")
    initOrganizationChart();
    function initOrganizationChart(){
        $.post('linkUrl',{conductId:taskId},function(res){
            if(res.code == '0'){
                $("#chart5").html('');
                $("#chart5").orgchart({
                    'nodeTitle': 'organizationName',
                    'draggable':false,
                    'data':res.data.length>0?res.data[0]:{}
                });
                // orgChart点击事件
                $('#chart5').off().click(function(){
                    var organizationName = $(this).html();
                    // 当前点击的节点名称变为红色
                    $('.orgchart .title').css('color'.'#fff');
                });
                // 默认选择第一个节点
                $('#chart5 .orgchart tbody tr').eq(0).find('div .title').click()
            }
        })
    }
})

tian-happy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可视化图表（ECharts、orgchart）

一、ECharts官网：https://echarts.apache.org/examples/zh/index.html常用的饼图、柱状图、关系图html中js文件引入:<link type="text/javascript" src="../eCharts-4/eCharts4.js" /><link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" /><!
复制链接

扫一扫