echarts实现一个页面同时显示多个图表

1 篇文章 1 订阅
1 篇文章 0 订阅

前言:

因工作需要,老大要求给我一个JSON数据,用echarts,写一个option实现多个图表(折线图,饼图,关系图)展示,也就是说只要一个div(dom对象),实现多个不同形状的图表展示,(ps:前期没弄清老大意思,写了三个div来显示-,尴尬--_---)。这里我用了LayUI(表格)+eCharts来,通过引入自定义的js,实现页面效果显示
自己在网上找了下,没有找到对应的文章,直接来说怎么实现,所以特意写了此文章,共同学习。

总结技巧:

1.先用最少的代码显示出一个图(eg:饼图只要一个series就可以显示出来)

      2.【关键点】自己能控制每个图在自己指定的地方的显示(eg:饼图通过配置center来确定中心位置,radius确定饼图的大小,控制饼图显示在:右上角,中间,左下角)。
option = {//简单的 折线图+饼图 展示
    grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},//折线图位置控制
    ],
    xAxis: [
        {gridIndex: 0,type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},
    ],
    yAxis: [
        {gridIndex: 0 },
    ],
    series: [
        {
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [1,2,3,4,5],
        },
        {
            type: 'pie',
            radius : '45%',
            center: ['80%', '30%'],//饼图位置控制
            data: [1,2,3,4,5],
        },
    ]
};
   3.确定了每个图位置,整体布局好了,再来添加每个图需要的功能点
   4.关系图每个节点的位置确定:通过笛卡尔积坐标系+节点的value[x,y]实现(我这用的是之字形显示节点)。

eCharts链接(在线修改):http://gallery.echartsjs.com/editor.html?c=xHJUB4SZmz&v=1
官方例子:http://www.echartsjs.com/gallery/editor.html?c=scatter-anscombe-quartet
官例调试技巧点:通过修改删除:series (xAxisIndex), yAxis(gridIndex) ,grid(x,x2,y,y2),查看效果了解参数(可先看配置项手册)
效果图:


前台html页面代码:

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 复制演示:都修改成自己的路径 -->
    <!-- 引入echarts的js库 -->
    <script  src="../../dist/echarts.js"></script>

    <!-- 引入自定义的js(同文件夹下) -->
    <script type="text/javascript" src="oneForAll.js"></script>

    <style type="text/css">body{height: 100%}
    		/*通过百分比设置图表的div大小*/
    		.chart{height: 70%}
	</style>

	<!-- 引入layui库 -->
	  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  	  <script src="layui/layui.js" charset="utf-8"></script>
  	  <script src="layui/yqyTable.js" charset="utf-8"></script>

</head>
<body>
	     <!-- echarts图表数据对象 -->
	     <div class="chart" id="yqyMain" ></div>

		 <script>
		 	//固定写法
		   var  chart = echarts.init(document.getElementById('yqyMain'));
		    /*接受自定义Option.js中的函数返回的:option*/
		   var yqyOption=oneForAll();
		   chart.setOption(yqyOption);

	    </script>

 
 
		<!-- layui选项卡界面:如不需要整合表格=可忽略 -->
		<div class="layui-tab">

			<ul class="layui-tab-title">
				<li class="layui-this">基本信息</li>
				<li>服务信息</li>
				<li>关系信息</li>
			</ul>

			<div class="layui-tab-content">

				<div class="layui-tab-item layui-show">
					<!-- 表格数据 -->
					<table id="sysVolTable"></table>
					<!-- 序号自增:翻页有小问题,点击下一页又从1开始计数,待改进 -->
					<script type="text/html" id="indexTp1">
						{{d.LAY_TABLE_INDEX+1}}
					</script>
				</div> 

				<div class="layui-tab-item ">服务纬度</div>
				<div class="layui-tab-item ">关系数</div>

			</div>
		</div>  
		<!-- 选项卡:功能性设置 -->
		<script>
			layui.use('element',function(){
				var element=layui.element;
			});
		</script>     
</body>
</html>

js代码:

文件名:oneForAll.js
 
  
//饼图数据
    pieData=[[{"name":"A系统","value":2},{"name":"B系统","value":4},{"name":"C系统","value":3},{"name":"D系统","value":3},{"name":"E系统","value":7},{"name":"F系统","value":3},{"name":"G系统","value":3},{"name":"H系统","value":3}],["A系统","B系统","C系统","D系统","E系统","F系统","G系统","H系统"]];

//折线图数据
    yqyData=[[0,1,2,3,4,5,6,7,8,9,10,11,12],[600,1150,400,850,600,650,100,1150,100,700,600,800,500]]
    
//---------------------------------------------关系图数据获取:start,有点多,可先忽略查看----------------------------------------------------------

//用java代码:自动生成关系图数据(因为前期,没有理解需求——_——:全是自己用java自动生成的json数据)
 relatData=[{"node":"系统节点1","endpoint":["系统节点3"],"service":["java.local.name_1","java.local.name_11"]},{"node":"系统节点2","endpoint":["系统节点3","系统节点1"],"service":["java.local.name_2","java.local.name_22"]},{"node":"系统节点3","endpoint":["系统节点4","系统节点2"],"service":["java.local.name_3","java.local.name_33"]},{"node":"系统节点4","endpoint":["系统节点3"],"service":["java.local.name_4","java.local.name_44"]},{"node":"系统节点5","endpoint":["系统节点2"],"service":["java.local.name_5","java.local.name_55"]},{"node":"系统节点6","endpoint":["系统节点3"],"service":["java.local.name_6","java.local.name_66"]},{"node":"系统节点7","endpoint":["系统节点2"],"service":["java.local.name_7","java.local.name_77"]},{"node":"系统节点8","endpoint":["系统节点2"],"service":["java.local.name_8","java.local.name_88"]}];
            
            //获取节点数据
            function get_nodes(relatData) {//官方的方法改造了一下=自定义生成:关系图中节点位置
                        var nodes = [];
                        var tmp_nodes = [];
                        var x1=1200;
                        var y1=100;

                        for(var nodes_i in relatData) {
                            //x,y数据归位
                             x1=5;
                             y1=5;
                             //三个节点为一排,之字形增加
                             x1=x1+10*(nodes_i%3);//保持0,1,2
                             y1=y1+10*Math.floor(nodes_i/3);//向下取整

                             console.log("x1="+x1+" y1="+y1);
                             console.log("x1="+(nodes_i%3)+" y1="+(Math.floor(nodes_i/3)));
                            tmp_nodes.push(relatData[nodes_i].node);
                            nodes.push(
                                {

                                    'name':relatData[nodes_i].node,
                                    'value':[x1,y1]//4.通过x,y来确定关系图的节点位置
                                }
                             );
                            }
                            return nodes;
                        }

            //获取节点数据关系
            function get_links(relatData) {
                        var links = [];
                        for(var nodes_i in relatData) {
                            var node = relatData[nodes_i].node;
                            var endpoint = relatData[nodes_i].endpoint;
                            var service = relatData[nodes_i].service;
                            // console.log(service);
                            for(var service_i in endpoint) {
                                links.push({
                                    'source':node,
                                    'target':endpoint[service_i],
                                    'label': {
                                        'normal': {
                                            'show': false,
                                            'textStyle':{
                                                'fontSize':5
                                            },
                                            'formatter': service
                                        }
                                    },
                                    'lineStyle': {
                                        'normal': {
                                            'curveness': 0.1
                                        }
                                    }
                                })
                            }
                        }
                        for (var i = 0, len1 = links.length; i < len1; i++) {
                            for(var j = i, len2 = len1 - 1; j < len2; j++) {
                                if (links[i].source==links[j].target) {
                                    links[j].lineStyle.normal.curveness = -0.1;
                                }
                            }
                        }
                        // console.log(links);
                        return links;
                    }
//------------------------------------------------------关系图获取数据:end-----------------------------------------------------------------

//按老大要求:多个图表数据整合成一个option
    //【关键点】:1.用最少的代码显示出一个图(eg:饼图只要一个series就可以显示出来)
    //2.确定每个图表的位置,占的区域(eg:饼图通过配置center来确定中心位置,radius确定饼图的大小)。
function oneForAll(){

        //我选折线图作为基础option
        var  yqyOption = {                
                        xAxis: [
                                {data: yqyData[0],gridIndex:0},//折线图x轴数据赋值,指定坐标信息
                                {gridIndex:1,type:'value'}
                        ],
                        yAxis: [
                            {
                                name:'交易量',
                                splitLine: {show: false},
                                gridIndex:0
                            },
                            {gridIndex:1,type:'value'}
                        ],

                        grid:[//指定坐标轴位置,大小
                            {x:'7%',y:'7%',width:'50%',height:'31%'},
                            {x:'60%',bottom:'1%',height:'90%',width:'35%',contianLabel:true}//关系图位置
                        ],
                        
                        series: [{
                        type: 'line',
                            xAxisIndex:0,//指定折线图数据显示到:grid坐标系:0
                            yAxisIndex:0,
                            showSymbol: false,
                            data: yqyData[1]//折线图y轴数据赋值
                        }]
                    };

                //======饼图数据1=====
                var pieSeries1={
                                name : '面积模式',
                                type : 'pie',
                                radius : [ 10, 80 ],
                                center : [ '18%', '75%' ],//位置确定:左下角
                                data :pieData[0]//饼图数据赋值
                            };

                //======饼图数据2=====
                 var pieSeries2={
                                name : '面积模式',
                                type : 'pie',
                                radius : [ 10, 80 ],
                                center : [ '47%', '75%' ],
                                roseType : 'area',//zxj玫瑰饼图
                                data :pieData[0]
                            };
                    
                    //将饼图series添加到主series中
                    yqyOption.series.push(pieSeries1);//完成了一个简单的折线图和饼图的数据合并
                    yqyOption.series.push(pieSeries2);

                //关系图数据
                 var relatSeries = 
                            {
                                type: 'graph',
                                // layout: 'circular',
                                layout: 'force',//1.力引导图
                                coordinateSystem:'cartesian2d',//2.笛卡尔坐标系设置
                                xAxisIndex:1,//3.选取的第二个坐标系,为关系图数据位置,4.value值设置
                                yAxisIndex:1,
                                focusNodeAdjacency: true,
                                legendHoverLink: true,
                                hoverAnimation:true,
                                symbolSize: 30,
                                edgeSymbolSize: 10,
                                roam: true,
                                symbol: "roundRect",
                                label: {
                                    normal: {
                                        show: true,
                                    }
                                },
                                edgeSymbol: ['circle', 'arrow'],
                                edgeSymbolSize: [4, 15],
                                edgeLabel: {
                                    normal: {
                                        textStyle: {
                                            fontSize: 20
                                        }
                                    }
                                },
                                data: get_nodes(relatData),//节点数据赋值
                                links: get_links(relatData),

                                lineStyle: {
                                    normal: {
                                        opacity: 0.9,
                                        width: 2,
                                        curveness: 0,
                                        type :'dashed'
                                    }
                                }
                            };
                    
                            //将关系图添加到主series中
                            yqyOption.series.push(relatSeries);

                    return yqyOption;
}

LayUI表格js

 
  
 
 
注意需要最前面添加分号  ;
yqyTable.js
 
  
;layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#sysVolTable',
    page:  {limit:1},//指定分页
    data: [{
    "srcIp": "192.168.0.1",
    "srcSys": "SRC",
    "destIp": "192.168.0.8",
    "destSys": "DEST",
    "startTime": "2017-12-25 9:31",
    "endTime": "2017-12-25 9:31",
    "remark":"yqy测试数据"
},{
    "srcIp": "192.168.0.1",
    "srcSys": "SRC",
    "destIp": "192.168.0.7",
    "destSys": "DEST",
    "startTime": "2017-12-27 18:31",
    "endTime": "2017-12-27 18:31",
    "remark":"yqy测试数据"
}], 
    cols: [[
          {title:'序号',templet:'#indexTp1', width:'6%'},  
          {field:'srcIp', title:'IP', width:'17%',sort:true},  
          {field:'srcSys', title:'源系统', width:'10%'},
          {field:'destIp', title:'目标IP', width:'17%'},
          {field:'destSys', title:'目标系统', width:'10%'},
          {field:'startTime', title:'开始时间', width:'11%'},
          {field:'endTime', title:'结束时间', width:'11%'},
          {field:'remark', title:'备注'}
        ]]
  });
});


 
  
 
 



  • 43
    点赞
  • 236
    收藏
    觉得还不错? 一键收藏
  • 42
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 42
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值