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=" 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <script src="echarts.js"></script>
 8 </head>
 9 <body>
10     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
11     <div id="main" style=" 600px;height:400px;"></div>
12     <script type="text/javascript">
13         // 基于准备好的dom，初始化echarts实例
14         var myChart = echarts.init(document.getElementById('main'));
15 
16         // 指定图表的配置项和数据
17         var option = {
18             title: {
19                 text: 'ECharts 入门示例'
20             },
21             tooltip: {},
22             legend: {
23                 data:['销量']
24             },
25             xAxis: {
26                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
27             },
28             yAxis: {},
29             series: [{
30                 name: '销量',
31                 type: 'bar',
32                 data: [5, 20, 36, 10, 10, 20]
33             }]
34         };
35 
36         // 使用刚指定的配置项和数据显示图表。
37         myChart.setOption(option);
38     </script>
39 </body>
40 </html>

这样你的第一个图表就诞生了！

三、绘制地图

上面图表例子是Echarts官网提供的例子，比较简单。下面绘制一个地图
需要引入三个文件：

<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
<script src="js/world.js"></script>//官网上下载

综合上述：Echarts官网提供了两种地图数据类型，一种是js，一种是json。这里先以js引入为例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <script src="js/echarts.js"></script>
 8     <script src="js/jquery.js"></script>
 9     <script src="js/world.js"></script>
10 
11 </head>
12 <body>
13     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
14     <div id="main" style=" 1600px;height:1000px;"></div>
15     <script type="text/javascript"><!--
16     var chart = echarts.init(document.getElementById('main'));
17     chart.setOption({
18         series: [{
19             type: 'map',
20             map: 'world'
21         }]
22     });
23    </script>
24 </body>
25 </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上面整理的，希望格式正确啊）

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6          
  7     <script src="js/echarts.min.js"></script>
  8     <script src="js/china.js"></script>
  9         
 10     </head>
 11     <body>
 12         <div id="main" style="900px;height:666px;  border: 1px solid red;"></div>
 13     <script type="text/javascript">
 14         // 基于准备好的dom，初始化echarts实例
 15         var myChart = echarts.init(document.getElementById('main'));
 16         // 指定图表的配置项和数据
 17 //      开始
 18         var geoCoordMap = {//用到的城市的所有的经纬度
 19     '上海': [121.4648,31.2891],
 20     '东莞': [113.8953,22.901],
 21     '东营': [118.7073,37.5513],
 22     '中山': [113.4229,22.478],
 23     '临汾': [111.4783,36.1615],
 24     '临沂': [118.3118,35.2936],
 25     '丹东': [124.541,40.4242],
 26     '丽水': [119.5642,28.1854],
 27     '乌鲁木齐': [87.9236,43.5883],
 28     '佛山': [112.8955,23.1097],
 29     '保定': [115.0488,39.0948],
 30     '兰州': [103.5901,36.3043],
 31     '包头': [110.3467,41.4899],
 32     '北京': [116.4551,40.2539],
 33     '北海': [109.314,21.6211],
 34     '南京': [118.8062,31.9208],
 35     '南宁': [108.479,23.1152],
 36     '南昌': [116.0046,28.6633],
 37     '南通': [121.1023,32.1625],
 38     '厦门': [118.1689,24.6478],
 39     '台州': [121.1353,28.6688],
 40     '合肥': [117.29,32.0581],
 41     '呼和浩特': [111.4124,40.4901],
 42     '咸阳': [108.4131,34.8706],
 43     '哈尔滨': [127.9688,45.368],
 44     '唐山': [118.4766,39.6826],
 45     '嘉兴': [120.9155,30.6354],
 46     '大同': [113.7854,39.8035],
 47     '大连': [122.2229,39.4409],
 48     '天津': [117.4219,39.4189],
 49     '太原': [112.3352,37.9413],
 50     '威海': [121.9482,37.1393],
 51     '宁波': [121.5967,29.6466],
 52     '宝鸡': [107.1826,34.3433],
 53     '宿迁': [118.5535,33.7775],
 54     '常州': [119.4543,31.5582],
 55     '广州': [113.5107,23.2196],
 56     '廊坊': [116.521,39.0509],
 57     '延安': [109.1052,36.4252],
 58     '张家口': [115.1477,40.8527],
 59     '徐州': [117.5208,34.3268],
 60     '德州': [116.6858,37.2107],
 61     '惠州': [114.6204,23.1647],
 62     '成都': [103.9526,30.7617],
 63     '扬州': [119.4653,32.8162],
 64     '承德': [117.5757,41.4075],
 65     '拉萨': [91.1865,30.1465],
 66     '无锡': [120.3442,31.5527],
 67     '日照': [119.2786,35.5023],
 68     '昆明': [102.9199,25.4663],
 69     '杭州': [119.5313,29.8773],
 70     '枣庄': [117.323,34.8926],
 71     '柳州': [109.3799,24.9774],
 72     '株洲': [113.5327,27.0319],
 73     '武汉': [114.3896,30.6628],
 74     '汕头': [117.1692,23.3405],
 75     '江门': [112.6318,22.1484],
 76     '沈阳': [123.1238,42.1216],
 77     '沧州': [116.8286,38.2104],
 78     '河源': [114.917,23.9722],
 79     '泉州': [118.3228,25.1147],
 80     '泰安': [117.0264,36.0516],
 81     '泰州': [120.0586,32.5525],
 82     '济南': [117.1582,36.8701],
 83     '济宁': [116.8286,35.3375],
 84     '海口': [110.3893,19.8516],
 85     '淄博': [118.0371,36.6064],
 86     '淮安': [118.927,33.4039],
 87     '深圳': [114.5435,22.5439],
 88     '清远': [112.9175,24.3292],
 89     '温州': [120.498,27.8119],
 90     '渭南': [109.7864,35.0299],
 91     '湖州': [119.8608,30.7782],
 92     '湘潭': [112.5439,27.7075],
 93     '滨州': [117.8174,37.4963],
 94     '潍坊': [119.0918,36.524],
 95     '烟台': [120.7397,37.5128],
 96     '玉溪': [101.9312,23.8898],
 97     '珠海': [113.7305,22.1155],
 98     '盐城': [120.2234,33.5577],
 99     '盘锦': [121.9482,41.0449],
100     '石家庄': [114.4995,38.1006],
101     '福州': [119.4543,25.9222],
102     '秦皇岛': [119.2126,40.0232],
103     '绍兴': [120.564,29.7565],
104     '聊城': [115.9167,36.4032],
105     '肇庆': [112.1265,23.5822],
106     '舟山': [122.2559,30.2234],
107     '苏州': [120.6519,31.3989],
108     '莱芜': [117.6526,36.2714],
109     '菏泽': [115.6201,35.2057],
110     '营口': [122.4316,40.4297],
111     '葫芦岛': [120.1575,40.578],
112     '衡水': [115.8838,37.7161],
113     '衢州': [118.6853,28.8666],
114     '西宁': [101.4038,36.8207],
115     '西安': [109.1162,34.2004],
116     '贵阳': [106.6992,26.7682],
117     '连云港': [119.1248,34.552],
118     '邢台': [114.8071,37.2821],
119     '邯郸': [114.4775,36.535],
120     '郑州': [113.4668,34.6234],
121     '鄂尔多斯': [108.9734,39.2487],
122     '重庆': [107.7539,30.1904],
123     '金华': [120.0037,29.1028],
124     '铜川': [109.0393,35.1947],
125     '银川': [106.3586,38.1775],
126     '镇江': [119.4763,31.9702],
127     '长春': [125.8154,44.2584],
128     '长沙': [113.0823,28.2568],
129     '长治': [112.8625,36.4746],
130     '阳泉': [113.4778,38.0951],
131     '青岛': [120.4651,36.3373],
132     '韶关': [113.7964,24.7028]
133 };
134 
135         var BJData = [//从北京出发
136             [{name:'北京'}, {name:'上海',value:95}],
137             [{name:'北京'}, {name:'广州',value:90}],
138             [{name:'北京'}, {name:'大连',value:80}],
139             [{name:'北京'}, {name:'南宁',value:70}],
140             [{name:'北京'}, {name:'南昌',value:60}],
141             [{name:'北京'}, {name:'拉萨',value:50}],
142             [{name:'北京'}, {name:'长春',value:40}],
143             [{name:'北京'}, {name:'包头',value:30}],
144             [{name:'北京'}, {name:'重庆',value:20}],
145             [{name:'北京'}, {name:'常州',value:10}]
146         ];
147 
148         var SHData = [//从上海出发
149             [{name:'上海'},{name:'包头',value:95}],
150             [{name:'上海'},{name:'昆明',value:90}],
151             [{name:'上海'},{name:'广州',value:80}],
152             [{name:'上海'},{name:'郑州',value:70}],
153             [{name:'上海'},{name:'长春',value:60}],
154             [{name:'上海'},{name:'重庆',value:50}],
155             [{name:'上海'},{name:'长沙',value:40}],
156             [{name:'上海'},{name:'北京',value:30}],
157             [{name:'上海'},{name:'丹东',value:20}],
158             [{name:'上海'},{name:'大连',value:10}]
159         ];
160 
161         var GZData = [//从广州出发
162             [{name:'广州'},{name:'福州',value:95}],
163             [{name:'广州'},{name:'太原',value:90}],
164             [{name:'广州'},{name:'长春',value:80}],
165             [{name:'广州'},{name:'重庆',value:70}],
166             [{name:'广州'},{name:'西安',value:60}],
167             [{name:'广州'},{name:'成都',value:50}],
168             [{name:'广州'},{name:'常州',value:40}],
169             [{name:'广州'},{name:'北京',value:30}],
170             [{name:'广州'},{name:'北海',value:20}],
171             [{name:'广州'},{name:'海口',value:10}]
172         ];
173 //        设计飞机路线，这个数字怎么显示出来的？
174         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';
175         
176         //这个函数用于取出data中所有数据的起点和终点的坐标
177         var convertData = function (data) {
178             var res = [];
179             for (var i = 0; i < data.length; i++) {
180                 var dataItem = data[i];
181                 var fromCoord = geoCoordMap[dataItem[0].name];
182                 var toCoord = geoCoordMap[dataItem[1].name];
183                 if (fromCoord && toCoord) {
184                     res.push([{
185                         name: dataItem[0].name,
186                         coord: fromCoord
187                     }, {
188                         name: dataItem[1].name,
189                         coord: toCoord
190                     }]);
191                 }
192             }
193             return res;
194         };
195         
196         var color = ['#a6c84c', '#ffa022', '#46bee9'];//对应图中三个城市迁徙图的颜色
197         var series = [];//三个系列图变量，可以push方法将属性添加进series中。
198         //接下来，先分析第一个系列，即特效点的设置：
199         [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
200             //分别将上述三个item传入function函数，
201         //并调用function函数，目的是绘制三个城市的迁徙图，BJData,SHData,GZData数据集请查看附录D
202             series.push({
203                 name: item[0] + ' Top10',//系列名称
204                 type: 'lines',//系列使用的图类型
205                 zlevel: 1,//第一层，图表是有分层的，用于更好展示图表
206                 effect: {
207                     show: true,//开启特效，即为图中白色飞点
208                     period: 6,//特效点飞行的时间
209                     trailLength: 0.7,//特效点尾部长度
210                     color: '#fff',//特效颜色，图中为白色
211                     symbolSize: 3//特效点的大小
212                 },
213                 lineStyle: {
214                     normal: {
215                         color: color[i],//特效路径的颜色，如果width为0,则不显示
216                          0,//路径宽度，0则没有显示画出路径
217                         curveness: 0.2//特效点路径的曲率，值越大，越弯曲
218                     }
219                 },
220                 data: convertData(item[1])//利用函数求出航线起点和终点的坐标，当绘制北京迁徙图时，item[1]即为BJData，
221             },
222             //然后分析下第二系列，即飞机飞行路径设置：
223             {
224                 name: item[0] + ' Top10',//系列名称
225                 type: 'lines',//特效线图
226                 zlevel: 2,//第二层
227                 effect: {//图中飞机特效的配置
228                     show: true,//显示特效
229                     period: 6,//特效动画的时间
230                     trailLength: 0,// 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
231                     symbol: planePath,//飞机图形的路径
232                     symbolSize: 15//飞机大小
233                 },
234                 lineStyle: {//飞机航线风格
235                     normal: {
236                         color: color[i],//飞机航线的颜色
237                          1,//飞机航线的宽度
238                         opacity: 0.4,//飞机航线透明度，为0时，则不绘制航线
239                         curveness: 0.2//飞机航线额弯曲程度
240                     }
241                 },
242                 data: convertData(item[1])//数据，即航线的起点和终点的坐标
243             },
244             //最后第三个系列为图中涟漪效果的设置，采用带有涟漪特效动画的散点（气泡）图，代码如下：
245             {
246                 name: item[0] + ' Top10',//系列名称
247                 type: 'effectScatter',//系列使用图表类型
248                 coordinateSystem: 'geo',//系列使用坐标类型，这里没地图坐标
249                 zlevel: 2,//第二层
250                 rippleEffect: {
251                     brushType: 'stroke'//波纹的填充方式，可以设置为’stroke’和‘fill’，’stroke’只是在点外围设置涟漪，’fill’涟漪填充更圆满
252                 },
253                 label: {//设置图标说明文字
254                     normal: {
255                         show: true,
256                         position: 'right',//文字在图标右边
257                         formatter: '{b}'//设置显示的文字，可以设置{a}, {b}，{c}，分别表示系列名，数据名，数据值
258                     }
259                 },
260                 symbolSize: function (val) {
261                     return val[2] / 8;//根据每个节点的值，设置涟漪节点的大小
262                 },
263                 itemStyle: {
264                     normal: {
265                         color: color[i]//设置涟漪节点的颜色
266                     }
267                 },
268                 data: item[1].map(function (dataItem) {//设置数据，即为每个省份的名称+省份坐标+省份的值
269                     return {
270                         name: dataItem[1].name,
271                         //坐标数据geoCoordMap请查看附录C
272                         value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
273                     };
274                 })
275             });
276         });
277 
278         option = {
279             backgroundColor: '#404a59',
280             title : {
281                 text: '模拟迁徙',
282                 subtext: '数据纯属虚构',
283                 left: 'center',
284                 textStyle : {
285                     color: '#fff'
286                 }
287             },
288             tooltip : {
289                 trigger: 'item'
290             },
291             legend: {
292                 orient: 'vertical',
293                 top: 'bottom',
294                 left: 'right',
295                 data:['北京 Top10', '上海 Top10', '广州 Top10'],
296                 textStyle: {
297                     color: '#fff'
298                 },
299                 selectedMode: 'single'
300             },
301             geo: {
302                 map: 'china',
303                 label: {
304                     emphasis: {
305                         show: false
306                     }
307                 },
308                 roam: true,
309                 itemStyle: {
310                     normal: {
311                         areaColor: '#323c48',
312                         borderColor: '#404a59'
313                     },
314                     emphasis: {
315                         areaColor: '#2a333d'
316                     }
317                 }
318             },
319             series: series
320         };
321                 //结束
322         
323                 // 使用刚指定的配置项和数据显示图表。
324                  myChart.setOption(option);
325                 
326             </script>
327     </body>
328 </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';

是怎么生成的？