EChars学习-1
Echarts,编写来自Enterprise Charts,商业级数据图表，是百度的一个开源的数据可视化工具
官网地址：http://echarts.baidu.com/
一、引入Echarts
<!DOCTYPE html> <html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js">
</header>
</html>
二、绘制
在绘制前需要准备一个dom容器
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这样你的第一个图表就诞生了！
三、绘制地图
上面图表例子是Echarts官网提供的例子，比较简单。下面绘制一个地图
需要引入三个文件：
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
<script src="js/world.js"></script>//官网上下载
综合上述：Echarts官网提供了两种地图数据类型，一种是js，一种是json。这里先以js引入为例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
<script src="js/world.js"></script> </head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1600px;height:1000px;"></div>
<script type="text/javascript"><!--
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'world'
}]
});
</script>
</body>
</html>
四、绘制动态迁移图
同上引入所需js文件
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
<script src="js/china.js"></script>
Echarts使用实际就三步
1、基于准备好的dom，初始化echarts实例（初始化）（之前要准备js和容器）
var chart = echarts.init(document.getElementById('main'));
2、参数设置，以及数据设置（可以直接从Echarts官网提供的例子中查找）
3、使用echarts实例来使刚指定的配置项和数据显示图表（生效）
chart .setOption(option);
完整代码如下：（上述都是在自己的world上面整理的，希望格式正确啊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script src="js/echarts.min.js"></script>
<script src="js/china.js"></script> </head>
<body>
<div id="main" style="width:900px;height:666px; border: 1px solid red;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
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]
}; var BJData = [//从北京出发
[{name:'北京'}, {name:'上海',value:95}],
[{name:'北京'}, {name:'广州',value:90}],
[{name:'北京'}, {name:'大连',value:80}],
[{name:'北京'}, {name:'南宁',value:70}],
[{name:'北京'}, {name:'南昌',value:60}],
[{name:'北京'}, {name:'拉萨',value:50}],
[{name:'北京'}, {name:'长春',value:40}],
[{name:'北京'}, {name:'包头',value:30}],
[{name:'北京'}, {name:'重庆',value:20}],
[{name:'北京'}, {name:'常州',value:10}]
]; var SHData = [//从上海出发
[{name:'上海'},{name:'包头',value:95}],
[{name:'上海'},{name:'昆明',value:90}],
[{name:'上海'},{name:'广州',value:80}],
[{name:'上海'},{name:'郑州',value:70}],
[{name:'上海'},{name:'长春',value:60}],
[{name:'上海'},{name:'重庆',value:50}],
[{name:'上海'},{name:'长沙',value:40}],
[{name:'上海'},{name:'北京',value:30}],
[{name:'上海'},{name:'丹东',value:20}],
[{name:'上海'},{name:'大连',value:10}]
]; var GZData = [//从广州出发
[{name:'广州'},{name:'福州',value:95}],
[{name:'广州'},{name:'太原',value:90}],
[{name:'广州'},{name:'长春',value:80}],
[{name:'广州'},{name:'重庆',value:70}],
[{name:'广州'},{name:'西安',value:60}],
[{name:'广州'},{name:'成都',value:50}],
[{name:'广州'},{name:'常州',value:40}],
[{name:'广州'},{name:'北京',value:30}],
[{name:'广州'},{name:'北海',value:20}],
[{name:'广州'},{name:'海口',value:10}]
];
// 设计飞机路线，这个数字怎么显示出来的？
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'; //这个函数用于取出data中所有数据的起点和终点的坐标
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([{
name: dataItem[0].name,
coord: fromCoord
}, {
name: dataItem[1].name,
coord: toCoord
}]);
}
}
return res;
}; var color = ['#a6c84c', '#ffa022', '#46bee9'];//对应图中三个城市迁徙图的颜色
var series = [];//三个系列图变量，可以push方法将属性添加进series中。
//接下来，先分析第一个系列，即特效点的设置：
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
//分别将上述三个item传入function函数，
//并调用function函数，目的是绘制三个城市的迁徙图，BJData,SHData,GZData数据集请查看附录D
series.push({
name: item[0] + ' Top10',//系列名称
type: 'lines',//系列使用的图类型
zlevel: 1,//第一层，图表是有分层的，用于更好展示图表
effect: {
show: true,//开启特效，即为图中白色飞点
period: 6,//特效点飞行的时间
trailLength: 0.7,//特效点尾部长度
color: '#fff',//特效颜色，图中为白色
symbolSize: 3//特效点的大小
},
lineStyle: {
normal: {
color: color[i],//特效路径的颜色，如果width为0,则不显示
width: 0,//路径宽度，0则没有显示画出路径
curveness: 0.2//特效点路径的曲率，值越大，越弯曲
}
},
data: convertData(item[1])//利用函数求出航线起点和终点的坐标，当绘制北京迁徙图时，item[1]即为BJData，
},
//然后分析下第二系列，即飞机飞行路径设置：
{
name: item[0] + ' Top10',//系列名称
type: 'lines',//特效线图
zlevel: 2,//第二层
effect: {//图中飞机特效的配置
show: true,//显示特效
period: 6,//特效动画的时间
trailLength: 0,// 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
symbol: planePath,//飞机图形的路径
symbolSize: 15//飞机大小
},
lineStyle: {//飞机航线风格
normal: {
color: color[i],//飞机航线的颜色
width: 1,//飞机航线的宽度
opacity: 0.4,//飞机航线透明度，为0时，则不绘制航线
curveness: 0.2//飞机航线额弯曲程度
}
},
data: convertData(item[1])//数据，即航线的起点和终点的坐标
},
//最后第三个系列为图中涟漪效果的设置，采用带有涟漪特效动画的散点（气泡）图，代码如下：
{
name: item[0] + ' Top10',//系列名称
type: 'effectScatter',//系列使用图表类型
coordinateSystem: 'geo',//系列使用坐标类型，这里没地图坐标
zlevel: 2,//第二层
rippleEffect: {
brushType: 'stroke'//波纹的填充方式，可以设置为’stroke’和‘fill’，’stroke’只是在点外围设置涟漪，’fill’涟漪填充更圆满
},
label: {//设置图标说明文字
normal: {
show: true,
position: 'right',//文字在图标右边
formatter: '{b}'//设置显示的文字，可以设置{a}, {b}，{c}，分别表示系列名，数据名，数据值
}
},
symbolSize: function (val) {
return val[2] / 8;//根据每个节点的值，设置涟漪节点的大小
},
itemStyle: {
normal: {
color: color[i]//设置涟漪节点的颜色
}
},
data: item[1].map(function (dataItem) {//设置数据，即为每个省份的名称+省份坐标+省份的值
return {
name: dataItem[1].name,
//坐标数据geoCoordMap请查看附录C
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
}); option = {
backgroundColor: '#404a59',
title : {
text: '模拟迁徙',
subtext: '数据纯属虚构',
left: 'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['北京 Top10', '上海 Top10', '广州 Top10'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: series
};
//结束 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); </script>
</body>
</html>
疑问：
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';
是怎么生成的？
EChars学习-1的更多相关文章
- EChars学习-2
上海的echars学习 <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu ...
- EChars学习之路1
引入echarts.min.js或者使用CDN https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js 为ECharts准备一个具备大小(宽高 ...
- 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记（1）
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
随机推荐
- COJ574 数字序列
试题描述 霸中智力测试机构的一项工作就是按照一定的规则删除一个序列的数字,得到一个确定的数列.陈思同学很渴望成为霸中智力测试机构的主管,但是他在这个工作上做的并不好,俗话说熟能生巧,他打算做很多练 ...
- Linux_屏蔽360、scanv、QQ管家等IP扫描
vi banip.sh #!/bin/bash echo "banip" iptables -A INPUT -s 221.204.203.0/24 -j DROP iptable ...
- spark-submit [options]
执行时需要传入的参数说明如下: Usage: spark-submit [options] <app jar | python file> [app options] 参数名称 含义 -- ...
- [转].net自定义验证控件CustomValidator的使用
本文转自:http://tech.cncms.com/web/aspnet/96310.html CustomValidator验证控件,可以自定义验证函数,实现其它几个验证控件不能实现的验证规则,最 ...
- Spring对加载的bean之间循环依赖的处理
根据下面文档的叙述,简言之: 对于相互之间通过构造函数注入相互循环依赖的情况,Spring会抛出BeanCurrentlyInCreationException错误. 如果AB两个beans是通过属性 ...
- GridVeiw 使用
1. 因使用的是 Mongodb,因此要在 ActiveDataProvider 中指定 key 属性 2. 自定义表格中的按钮 'class' => 'yii\grid\ActionColum ...
- [学习笔记]ESXI学习记录
vmware workstation环境下,可以为虚拟机添加多块网卡.在虚拟机上单击右键,settings 界面,选中network adapter,然后通过custom选项,可以将多个不同的虚拟机使 ...
- [ZZ] RGBM and RGBE encoding for HDR
Deferred lighting separate lighting rendering and make lighting a completely image-space technique. ...
- Shader Model 版本与DirectX的关系（OpenGL对应的呢？）
http://blog.sina.com.cn/s/blog_6e521a600100q4dr.html DX9还是能支持到固定管线的,虽然说是在内部被转换成shader: DX10明确不再支持固定管 ...
- Apache Spark源码走读之9 -- Spark源码编译
欢迎转载,转载请注明出处,徽沪一郎. 概要 本来源码编译没有什么可说的,对于java项目来说,只要会点maven或ant的简单命令,依葫芦画瓢,一下子就ok了.但到了Spark上面,事情似乎不这么简单 ...