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 ...
随机推荐
- HDU 4507 (鬼畜级别的数位DP）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4507 题目大意:求指定范围内与7不沾边的所有数的平方和.结果要mod 10^9+7(鬼畜の元凶) 解题 ...
- 禁止ViewState的3种解决方法
默认情况下,ViewState是被启用的,比如提交表单后,表单中输入的值会自动保留.但是如果不需要保留,也可以将其禁用,这样可以节省资源. 下面3种方式就可以分别禁用某一个控件.某一个页面和整个应 ...
- MIB-II
. 1.3.6.1.2.1
- JSONP - 跨域AJAX
基础概念 在进入本文正题之前,我们需要先了解一些基础概念(如果你已经对这些基础有所了解,可跳过此段落). 同源策略和跨域概念 同源策略(Same-orgin policy)限制了一个源(orgin)中 ...
- linux下六大IPC机制【转】
转自http://blog.sina.com.cn/s/blog_587c016a0100nfeq.html linux下进程间通信IPC的几种主要手段简介: 管道(Pipe)及有名管道(named ...
- Samba结合AD实现域帐号认证的文件服务器
准备一台Windows域控制器, 在Samba服务器上安装Webmin图形化管理工具, samba, krb5-user, winbind. 修改/etc/krb5.conf. [logging] d ...
- NBU7.0 Image Cleanup作业在没有配置hot catalog backup的情况下失败，Status=1
Issue NBU7.0 Image Cleanup作业在没有配置hot catalog backup的情况下失败,Status=1 Error NBU7.0 Image Cleanup作业失败, D ...
- 如何设置NBU的Backup, Archive and Restore
第一行表示Master Server 第二行猜测表示当前主机 第三行不清楚 总结: 1. 这里压根就没有Media Server的事, Media Server对整个备份系统来说是透明的. 2. ...
- 获取文本文件的第N行内容
在PowerShell中,可以通过Get-Content这个cmdlet来获取文本文件的内容.Get-Content将一个文本文件读取到一个数组中,每一个数组元素就是文件的一行内容.比如一个文本文件内 ...
- SIP中OPTIONS方法的用法及示例
SIP中OPTIONS方法的用法及示例 用OPTIONS方法实现Keep Alive SIP keep-alive方法