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';
是怎么生成的？