E-Charts数据可视化

本文介绍了E-Charts这一百度出品的免费图表展示工具的使用方法,包括柱状图、饼状图、折线图、分布图及迁徙图的示例,并讲解了其强大的功能和简易的操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数据可视化

一、展示方法

1).Jfreechart:免费,功能一般,效果一般(不怎么绚丽),但是是之前的产物,
以前用的比较多,现在用的比较少了(建议以了解为主)

2).e-charts:免费,百度出产的,功能强大,效果(绚丽),近几年的产物,现
在国内的众多软件公司用的比较多(推荐学习)

3).Hight-charts:国外产生,功能强大,效果绚丽,据说XX是抄袭他的,在国
内用的比较少(也是建议了解)

二、图表工具的作用以及原则

1).作用

   1>.清晰直观的使得数据可视化
   2>.结和后台技术真正做到数据的实时变化,例如可以实现k线图,因为有js定时器
   3>.提升软件产品的用户体验
   
2).原则

	1>.正常使用即可,不能偏离方向,切记不要主次不分
	2>.不能随便的去更改软件本身的源代码和功能,但是可以基于它实现拓展或者自定义开发
	

三.E-Charts的使用

1).E-Charts:是百度出产一个免费的用于图表展示的工具,因其强大的功能和简易上
手深受广大程序员喜爱,同时因其绚丽多彩的效果在同类软件中不断深受好评

2).知识掌握:需要具备HTML ,CSS,JS,Jquery ,Json等技能

3).官网地址:https://echarts.apache.org/zh/

4).商业开发版本
	 2.x: e-charts2.x版本的底层更多是依赖底层zrender
     3.x: 不再强制使用AMD的方式按需引入,引入方式简单了很多,只需要像普通的
  JavaScript 库一样用 script 标签引入
     补充:
     	AMD:Asynchronous Module Definition,意思为:异步模块定义
5).官网的使用介绍
	 文档:可以下载和查看相关的API和教程
     下载:可以下载软件,可以下载主题数据,地图数据,扩展数据,这里所谓的数据
  其实就是一些.js文件或者json文件,详细可以去参考下载数据文件夹
     实例:下载官方给出的实例,甚至可以在线编辑在线预览
     社区:可以讨论和参考下载别人例子的地方
     工具:在线生成一些数据,例如可以生成某个省份或者市区的数据的.js文件
     关于:项目介绍和版权归属的信息的公布

四、示例展示图

1).E-Charts之柱状图展示

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script>
<meta charset="UTF-8">
<title>e-charts应用举例之通过柱状图显示公司的全年--季度财务统计报告</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var shouruData=[];//数组对象:存放12个月的收入金额
var zhichuData=[];//数组对象:存放12个月的支出金额
var yusuanData=[];//数组对象:存放12个月的预算金额
<c:forEach items="${list_shouru}" var="shouru">
shouruData.push(parseInt("${shouru.jiner}"));
</c:forEach>

<c:forEach items="${list_zhichu}" var="zhichu">
zhichuData.push(parseInt("${zhichu.jiner}"));
 </c:forEach>


 <c:forEach items="${list_yusuan}" var="yusuan">
 yusuanData.push(parseInt("${yusuan.jiner}"));
 </c:forEach>
 
//1.基于准备好的dom,初始化echarts实例
 var myChart = echarts.init(document.getElementById("main"));

 // 2.指定图表的配置项和数据
 var option = {
    title: {  
      //主标题文本,'\n'指定换行  
      text: 'XX公司2020年的财务统计报告',  
      //主标题文本超链接  
      link: 'http://www.baidu.com',  
      //副标题文本,'\n'指定换行  
      //subtext: 'www.stepday.com',  
      //副标题文本超链接  
      // sublink: 'http://www.stepday.com/myblog/?Echarts',  
      //水平安放位置,默认为左侧,
      //可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
      x: '180px',  
      //垂直安放位置,默认为全图顶端,
      //可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
      y: '20px'  
    },	
 		
     tooltip: {
     	//触发类型,默认('item')数据触发,可选为:'item'(数据触发,
     	//其实就是提示窗显示数据) | 'axis'(轴线触发,其实就是提示窗显示轴线)
     	trigger: 'axis' 
     },
     legend: {
     	//显示策略,可选为:true(显示) | false(隐藏),默认值为true  
         show: true, 
         //水平安放位置,默认为全图居中,
         //可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
         x: 'center',  
         //垂直安放位置,默认为全图顶端,
         //可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
         y: 'top',  
         data:['收入','预算','支出']
     },
     
     xAxis: {
     	 type: 'category', 
         data: ["第一季度","第二季度","第三季度","第四季度"],
         name:'季度'
     },
     yAxis: {
     	  show: true,   //是否显示 y 轴,默认显示,但是设置为false就不显示了
     	  //坐标轴类型。'value' 数值轴,适用于连续数据。
     	  //'category' 类目轴,适用于离散的类目数据,为该
     	  //类型时必须通过 data 设置类目数据
     	  type: 'value',
     	  name:'金额(元)'
     },
     series: [
         {
         	
             name: '收入',
             type: 'bar',
             markPoint: {  
                 data: [  
                     {type: 'max', name: '最大值'},  
                     {type: 'min', name: '最小值'}  
                 ]  
             }, 
             markLine: {  
                 data: [  
                     {type: 'average', name: '平均值'}  
                 ]  
             },
             data: shouruData
         },
         {
         name: '预算',
         type: 'bar',
         markPoint: {  
             data: [  
                 {type: 'max', name: '最大值'},  
                 {type: 'min', name: '最小值'}  
             ]  
         }, 
         markLine: {  
             data: [  
                 {type: 'average', name: '平均值'}  
             ]  
         },
         data: yusuanData
    		},
    		{
             name: '支出',
             type: 'bar',
             markPoint: {  
                 data: [  
                     {type: 'max', name: '最大值'},  
                     {type: 'min', name: '最小值'}  
                 ]  
             }, 
             markLine: {  
                 data: [  
                     {type: 'average', name: '平均值'}  
                 ]  
             },
             data: zhichuData
         }
     ]
 };
 // 3.使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
</script>
</body>
</html>

2).E-Charts之饼状图展示

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>e-charts应用举例之通过饼状图显示公司员工的学历信息</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px; border:2px solid red;">
</div>
<script type="text/javascript">

var renshuData=[];//声明一个人数的数组对象,主要用来装人数的
var xueliData=[];//声明一个学历的数组对象,主要是用来装具体是什么学历的
<c:forEach var="map" varStatus="i" items="${list_xueli}">
renshuData.push("${map.renshu}");
xueliData.push("${map.xueli}");
</c:forEach>



// 1.基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
 title : {
 //标题
 text: 'XX公司员工学历信息图',
 //父标题
 subtext: '这个是二级标题---就是方便阅读--进一步解释大标题的',
 x:'center'
 },
tooltip : {
 trigger: 'item',
 //折线(区域)图、柱状(条形)图、K线图 : 
 //{a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
 //饼图、仪表盘、漏斗图: 
 //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
 formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
 orient: 'vertical',
 left: 'left',
 data: xueliData
},
series : [
 {
     name: '访问来源',
     type: 'pie',
     //饼图的半径,数组的第一项是内半径,第二项是外半径(相对于容器)。
     radius : '55%',  //[0, '75%'] 
     //饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
		//支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
     center: ['50%', '60%'],//[400, 300]
     data:[
         {value:renshuData[0], name:xueliData[0],itemStyle:{color:'red'}},
         {value:renshuData[1], name:xueliData[1],itemStyle:{color:'blue'}},
         {value:renshuData[2], name:xueliData[2],itemStyle:{color:'green'}},
         {value:renshuData[3], name:xueliData[3],itemStyle:{color:'pink'}}
     ]
 }
]

};
// 3.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

3).E-Charts之折线图展示

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script>
<title>e-charts应用举例之通过折线图显示学生的周作业完成情况</title>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>

<script type="text/javascript">
	
	 var wanchengData=[];//数组对象:存放一周的完成作业的每天的人数
	 var meiyouData=[];//数组对象:存放一周的没有完成作业的每天的人数
	 <c:forEach items="${list_zhexian}" var="zhexian">
	 wanchengData.push(parseInt("${zhexian.wanchen}"));
	 meiyouData.push(parseInt("${zhexian.meiyou}"));
     </c:forEach>
	
	var myChart = echarts.init(document.getElementById('main'));
		option = {
			    title : {
			        text: '**班一周作业验收情况统计走势图',
			        subtext: '二级标题'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['已完成','未完成']
			    },
			    toolbox: {
			        show : true,
			        x:'520',
			        y:'top',
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: true,
		title:"数据视图",lang: ['数据视图', '关闭', '刷新'],},
			            magicType : {show: true, 
	type: ['bar','line','stack'],title: {
			                line: '切换为折线图',
			                bar: '切换为柱状图',
			                stack: '切换为堆叠',
			                tiled: '切换为平铺'
			            }},
			            restore : {show: true,title:"还原",},
			            saveAsImage : {show: true,title:"保存为图片",}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
			            data : ['周一','周二','周三','周四','周五','周六','周日']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            axisLabel : {
			             formatter: '{value}人 '
			            }
			        }
			    ],
			    series : [
			        {
			            name:'已完成',
			            type:'line',
			            data:wanchengData,
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name: '平均值'}
			                ]
			            }
			        },
			        {
			            name:'未完成',
			            type:'line',
			            data:meiyouData,
			            markPoint : {
			                data : [
			                        {type : 'max', name: '最大值'},
			                        {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name : '平均值'}
			                ]
			            }
			        }
			    ]
			};
			//3.设定并显示                    
		 myChart.setOption(option);
	</script>
</body>
</html>

4).E-Charts之分布图展示

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta charset="utf-8">
    <title>e-charts应用举例之通过分布图显示学院学生来源分布</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        #main {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script src="<%=request.getContextPath()%>/qxt/echarts.js"></script>
<script src="<%=request.getContextPath()%>/qxt/bmap.js"></script>
<script src="<%=request.getContextPath()%>/qxt/china.js"></script>
<script src="<%=request.getContextPath()%>/qxt/jquery-1.8.1.js"></script>
<script type="text/javascript">

var shengfenData=[];
var renshuData=[];

<c:forEach var="map" items="${list_fenbu}" >
shengfenData.push("${map.shengfen}");
renshuData.push("${map.renshu}");
</c:forEach>
var sum=0;
for(var i =0;i<renshuData.length;i++)
{
	sum=sum+parseInt(renshuData[i]);
}
//获取绘图位置对象
var myChart = echarts.init(document.getElementById('main'));
function randomData() {
    return Math.round(Math.random()*1000);
}
function randomData1() {
    return Math.round(Math.random()*500);
}
function randomData2() {
    return Math.round(Math.random()*200);
}
function randomData3() {
    return Math.round(Math.random()*50);
}
//配置
option = {
    title: {
        x:'470px',
        text: '河北软件学院学生来源地理分布图',
        textStyle:{
            fontSize:14
            ,fontWeight:'normal'
            ,color:'#565656'
        },
        left:480,
        top:10,
        textStyle: {
        	// 颜色
        	color: '#0066FF',
        	// 水平对齐方式,可选为:'left' | 'right' | 'center'
        	align: 'left',
        	// 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
        	baseline: 'bottom',
        	// 字体系列
        	fontFamily: 'Arial, 黑体, sans-serif',
        	// 字号 ,单位px
        	fontSize: 20,
        	// 样式,可选为:'normal' | 'italic' | 'oblique'
        	fontStyle: 'italic',
        	// 粗细,可选为:'normal' | 'bold' | 'bolder' 
        	// | 'lighter' | 100 | 200 |... | 900
        	fontWeight: 'bold'
        },
        
    },
    tooltip: {
         trigger: 'item'
        ,formatter:'{b}<br>人数:{c}'
    },

    visualMap: {
        min: 0,
        max: 150,
        left:20,
        bottom:10,
        text: ['高','低'],// 文本,默认为数值文本
        color:['red','orange','yellow','green'],
        calculable: true
    },
    series: [
        {
            type: 'map',// 图表类型
            //显示的类型为中国地图,备注e-charts是支持中国地图和世界地图的
            mapType: 'china',
            roam: false,//是否开启滑动鼠标滚轮实现缩放
            itemStyle:{
            	// 默认状态下地图的文字
                normal:{label:{show:true}},
              },
            data:[
                  
                {name: '北京',value: randomData2() },
                {name: '天津',value: randomData2() },
                {name: '上海',value: randomData1() },
                {name: '重庆',value: randomData2() },
                {name: '河北',value: renshuData[3] },
                {name: '安徽',value: renshuData[0] },
                {name: '新疆',value: randomData3() },
                {name: '浙江',value: randomData() },
                {name: '江西',value: randomData3() },
                {name: '山西',value: renshuData[2] },
                {name: '甘肃',value: randomData1() },
                {name: '青海',value: randomData3() },
                {name: '黑龙江',value: renshuData[7] },
                {name: '辽宁',value: randomData3() },
                {name: '山东',value: renshuData[1]},
                {name: '江苏',value: randomData1() },
                {name: '河南',value: renshuData[4] },
                {name: '陕西',value: renshuData[6] },
                {name: '湖北',value: randomData3() },
                {name: '湖南',value: randomData() },
                {name: '贵州',value: renshuData[5] },
                {name: '云南',value: randomData() },
                {name: '广西',value: randomData() },
                {name: '台湾',value: 0 },
                {name: '海南',value: randomData3() },
                {name: '内蒙古',value: randomData3() },
                {name: '南海诸岛',value: 0 },
                {name: '吉林',value: randomData() },
                {name: '福建',value: 0 },
                {name: '广东',value: randomData1() },
                {name: '西藏',value: randomData3()},
                {name: '四川',value: randomData1() },
                {name: '宁夏',value: randomData1() },
                {name: '香港',value: 0 },
                {name: '澳门',value: 0 }
            ]
        }
    ]
};
//为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>

5).E-Charts之迁徙图展示(了解即可)

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <title>e-charts应用举例之通迁徙图显示学生离校示意图</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        #main {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript" src="<%=request.getContextPath()%>/qxt/echarts.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/qxt/bmap.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/qxt/china.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/qxt/world.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/qxt/jquery-1.8.1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/qxt/province_position.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sVMiVrWelyy5jTPT82UQxpx21avuUhLx"></script>
<script type="text/javascript">
alert(positions);
var myChart = echarts.init(document.getElementById('main'));
 
var geoCoordMap = {
    '上海': [121.4648,31.2891],
    '东莞': [113.8953,22.901],
    '东营': [118.7073,37.5513],
    '中山': [113.4229,22.478],
    '临汾': [111.4783,36.1615],
    '临沂': [118.3118,35.2936],
    '丹东': [124.541,40.4242],
    '丽水': [119.5642,28.1854],
    '乌鲁木齐': [87.9236,43.5883],
    '佛山': [112.8955,23.1097],
    '保定': [115.0488,39.0948],
    '兰州': [103.5901,36.3043],
    '包头': [110.3467,41.4899],
    '北京': [116.4551,40.2539],
    '北海': [109.314,21.6211],
    '南京': [118.8062,31.9208],
    '南宁': [108.479,23.1152],
    '南昌': [116.0046,28.6633],
    '南通': [121.1023,32.1625],
    '厦门': [118.1689,24.6478],
    '台州': [121.1353,28.6688],
    '合肥': [117.29,32.0581],
    '呼和浩特': [111.4124,40.4901],
    '咸阳': [108.4131,34.8706],
    '哈尔滨': [127.9688,45.368],
    '唐山': [118.4766,39.6826],
    '嘉兴': [120.9155,30.6354],
    '大同': [113.7854,39.8035],
    '大连': [122.2229,39.4409],
    '天津': [117.4219,39.4189],
    '太原': [112.3352,37.9413],
    '威海': [121.9482,37.1393],
    '宁波': [121.5967,29.6466],
    '宝鸡': [107.1826,34.3433],
    '宿迁': [118.5535,33.7775],
    '常州': [119.4543,31.5582],
    '广州': [113.5107,23.2196],
    '廊坊': [116.521,39.0509],
    '延安': [109.1052,36.4252],
    '张家口': [115.1477,40.8527],
    '徐州': [117.5208,34.3268],
    '德州': [116.6858,37.2107],
    '惠州': [114.6204,23.1647],
    '成都': [103.9526,30.7617],
    '扬州': [119.4653,32.8162],
    '承德': [117.5757,41.4075],
    '拉萨': [91.1865,30.1465],
    '无锡': [120.3442,31.5527],
    '日照': [119.2786,35.5023],
    '昆明': [102.9199,25.4663],
    '杭州': [119.5313,29.8773],
    '枣庄': [117.323,34.8926],
    '柳州': [109.3799,24.9774],
    '株洲': [113.5327,27.0319],
    '武汉': [114.3896,30.6628],
    '汕头': [117.1692,23.3405],
    '江门': [112.6318,22.1484],
    '沈阳': [123.1238,42.1216],
    '沧州': [116.8286,38.2104],
    '河源': [114.917,23.9722],
    '泉州': [118.3228,25.1147],
    '泰安': [117.0264,36.0516],
    '泰州': [120.0586,32.5525],
    '济南': [117.1582,36.8701],
    '济宁': [116.8286,35.3375],
    '海口': [110.3893,19.8516],
    '淄博': [118.0371,36.6064],
    '淮安': [118.927,33.4039],
    '深圳': [114.5435,22.5439],
    '清远': [112.9175,24.3292],
    '温州': [120.498,27.8119],
    '渭南': [109.7864,35.0299],
    '湖州': [119.8608,30.7782],
    '湘潭': [112.5439,27.7075],
    '滨州': [117.8174,37.4963],
    '潍坊': [119.0918,36.524],
    '烟台': [120.7397,37.5128],
    '玉溪': [101.9312,23.8898],
    '珠海': [113.7305,22.1155],
    '盐城': [120.2234,33.5577],
    '盘锦': [121.9482,41.0449],
    '石家庄': [114.4995,38.1006],
    '福州': [119.4543,25.9222],
    '秦皇岛': [119.2126,40.0232],
    '绍兴': [120.564,29.7565],
    '聊城': [115.9167,36.4032],
    '肇庆': [112.1265,23.5822],
    '舟山': [122.2559,30.2234],
    '苏州': [120.6519,31.3989],
    '莱芜': [117.6526,36.2714],
    '菏泽': [115.6201,35.2057],
    '营口': [122.4316,40.4297],
    '葫芦岛': [120.1575,40.578],
    '衡水': [115.8838,37.7161],
    '衢州': [118.6853,28.8666],
    '西宁': [101.4038,36.8207],
    '西安': [109.1162,34.2004],
    '贵阳': [106.6992,26.7682],
    '连云港': [119.1248,34.552],
    '邢台': [114.8071,37.2821],
    '邯郸': [114.4775,36.535],
    '郑州': [113.4668,34.6234],
    '鄂尔多斯': [108.9734,39.2487],
    '重庆': [107.7539,30.1904],
    '金华': [120.0037,29.1028],
    '铜川': [109.0393,35.1947],
    '银川': [106.3586,38.1775],
    '镇江': [119.4763,31.9702],
    '长春': [125.8154,44.2584],
    '长沙': [113.0823,28.2568],
    '长治': [112.8625,36.4746],
    '阳泉': [113.4778,38.0951],
    '青岛': [120.4651,36.3373],
    '韶关': [113.7964,24.7028],
    '佳木斯':[130.2841,46.8154]
};
 alert("geoCoordMap:"+geoCoordMap);
var BDData = [
    [{name:'保定'}, {name:'佳木斯',value: Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'连云港',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'乌鲁木齐',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'太原',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'济南',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'哈尔滨',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'大连',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'南京',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'长沙',value:Math.floor(Math.random() * (100 - 1)) + 1}],
    [{name:'保定'}, {name:'西安',value:Math.floor(Math.random() * (100 - 1)) + 1}]
];
 

 
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
 
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};
 
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[['保定', BDData]].forEach(function (item, i) {
    series.push({
            name: item[0] + ' Top10',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {
            name: item[0] + ' Top10',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {
            name: item[0] + ' Top10',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function (val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i]
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
});
 
option = {
    backgroundColor: '#404a59',
    title : {
        text: 'xx学院学生地理信息分部图',
        left: 'center',
        textStyle : {
            color: 'black'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['保定 Top10'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    dataRange: {
        min: 0,
        max: 100,
        x: 'right',
        calculable: true,
        color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
        textStyle: {
            color: '#fff'
        }
    },
    bmap: {
        center: [115.97, 29.71],
        zoom: 5,
        roam: true
    },
    series: series
};
myChart.setOption(option);
</script>
</body>
</html>
backgroundColor: '#404a59',
title : {
    text: 'xx学院学生地理信息分部图',
    left: 'center',
    textStyle : {
        color: 'black'
    }
},
tooltip : {
    trigger: 'item'
},
legend: {
    orient: 'vertical',
    top: 'bottom',
    left: 'right',
    data:['保定 Top10'],
    textStyle: {
        color: '#fff'
    },
    selectedMode: 'single'
},
dataRange: {
    min: 0,
    max: 100,
    x: 'right',
    calculable: true,
    color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
    textStyle: {
        color: '#fff'
    }
},
bmap: {
    center: [115.97, 29.71],
    zoom: 5,
    roam: true
},
series: series

};
myChart.setOption(option);

```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值