EChars学习-1
Posted 蜗牛闯红灯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
|
以上是关于EChars学习-1的主要内容，如果未能解决你的问题，请参考以下文章