在开发过程当中,咱们总会接到关于数据处理分析的需求,其中有一部分很重要就是数据统计可视化展现,对于数据可视化方面,echarts这点就作的很是好。最近研究echarts,对于散点地图这一块挺感兴趣的,在这里就作一篇整个过程的分享,首先给你们看下效果图:javascript
颜色方面大体比较淡,大家能够根据本身需求调整css
1、准备html
一、新建html,这边我创建的是echarts-map.html,而后引入echarts文件,能够去官网下载(下载完整版的),而后解压我这边结合的是layui和jquery来的,因此总的引入以下:java
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <title>echarts-map</title> <link rel="stylesheet" href="plugin/layui/css/layui.css"/> <script src="plugin/layui/layui.js"></script> <script src="plugin/jquery/jquery.min.js"></script> <!-- 我把echarts.js更名字了,以便区分其余版本 --> <script src="plugin/echarts/echarts3.8.4.js"></script> </head> <body> </body>
二、建立画布容器jquery
<!DOCTYPE html> <html lang="en"> <head> <!-- 这里是上面的引用文件 --> </head> <body> <div class="model"> <div class="panel-body"> <div id="map" style="width:80%;height: 500px;float: left"> <!-- 这边是将要存放的地图画布 --> </div> </div> </div> </body>
2、绘制地图
一、echarts的中国地图想要详细绘制出各省市,须要另外引入js和json文件,先下载map的js和json,密码是uqbj。json
在开始的引用文件地方将china.js文件引入:echarts
<script src="plugin/echarts/map/china.js"></script>
二、从这里开始使用js来绘制地图,全部代码写在<script>标签里面,
(1)首先是先初始化 ECharts 示例,在 init() 中传入图表容器 Dom 对象,
(2)同时定义一个变量 option,做为图表的配置项,
(3)经过配置 option,新建一个地理坐标系 geo ,地图类型为中国地图,
(4)而后调用 setOption(option) 为图表设置配置项。异步
注意:中国地图的map值为 ‘china’ ,世界地图的map值为 ‘world’ ,但若是要引用省市自治区地图 map 值为简体中文,例如 beijing.js,map 值为’北京’。函数
这里结合layui和jquery:大数据
<script type="text/javascript"> var layer; function map() { // 一、初始化echarts示例map var map = echarts.init(document.getElementById('map')); // 二、map的配置,配置 option,新建一个地理坐标系 geo ,地图类型为中国地图 var option = { geo: { map: 'china' } }; //三、调用 setOption(option) 为图表设置配置项 map.setOption(option); } layui.use(['element', 'layer'], function() { var element = layui.element(); layer = layui.layer; $(document).ready(function () { map(); }); }); </script>
而后引用json格式的地图数据,经过异步加载的方式,加载完成后须要手动注册地图
这里咱们使用 jQuery 的 $.get() 方法异步加载 china.json ,在回调函数中,以上述一样的方法初始化一个 mapCharts 、注册地图并设置 option,因此修改上面的代码为:
<script type="text/javascript"> var layer; function map() { // 一、初始化echarts示例map var map = echarts.init(document.getElementById('map')); $.get('plugin/echarts/map/json/china.json',function(chinaJson){ echarts.registerMap('china', chinaJson); // 注册地图 // 二、map的配置,配置 option,新建一个地理坐标系 geo ,地图类型为中国地图 var option = { geo: { map: 'china' } }; //三、调用 setOption(option) 为图表设置配置项 map.setOption(option); }) } layui.use(['element', 'layer'], function() { var element = layui.element(); layer = layui.layer; $(document).ready(function () { map(); }); }); </script>
而后就能够看到这样的地图了:
四、给地图改颜色,地图的绘制都在option里面操做,有各类配置项,能够查找官方文档
var option = { geo: { map: 'china', label: { emphasis: { show: false } }, roam: false, // 定义样式 itemStyle: { // 普通状态下的样式 normal: { areaColor: '#ABCDEF99', borderColor: '#fff' }, // 高亮状态下的样式,默认黄色 emphasis: { //areaColor: '#2a333d' } } } };
改颜色后的地图如图:
3、绘制散点图
一、新建散点图series
这里用到的数据须要两个,一个是各城市的坐标数据,一个是每一个城市对应所须要的值,这里到echarts3的官网例子里面就有,这里不详细赘述,只引几个
因此这里要进行的步骤是:
(1)在 option 中添加一个 series , series 的类型为散点图 scatter ,坐标系为地理坐标系 geo 。
(2)引入城市对应的要显示的data值
(3)引入城市的坐标值
(4)使用函数让data值和坐标值按城市名对应起来
具体看如下代码注释
<script type="text/javascript"> var layer; function map() { var map = echarts.init(document.getElementById('map')); //(2)引入data数据 var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山', value: 12}, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {name: '青岛', value: 18}, {name: '乳山', value: 18}, ... } $.get('plugin/echarts/map/json/china.json',function(chinaJson){ echarts.registerMap('china', chinaJson); // 注册地图 //(3)引入城市坐标 var geoCoordMap = { '海门':[121.15,31.89], '鄂尔多斯':[109.781327,39.608266], '招远':[120.38,37.35], '舟山':[122.207216,29.985295], '齐齐哈尔':[123.97,47.33], '盐城':[120.13,33.38], '赤峰':[118.87,42.28], '青岛':[120.33,36.07], '乳山':[121.52,36.89], ... } //(4)将数据和城市坐标对应上 var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var option = { geo: { ... } //(1)series 的类型为散点图 scatter series: [ { name: 'pm2.5', // series名称 type: 'scatter', // series图表类型 coordinateSystem: 'geo', // series坐标系类型 data: convertData(data), // series数据内容 //控制显示文本 label: { normal: { show: false }, emphasis: { show: true } }, //series样式 itemStyle: { normal: { color: '#ddb926' } } } ] }; map.setOption(option); }) } layui.use(['element', 'layer'], function() { var element = layui.element(); layer = layui.layer; $(document).ready(function () { map(); }); }); </script>
这样就能够将散点渲染出来了
到此基本就完成了,接下来就是样式变更了。
4、修改样式
一、根据数值大小改变点的大小,这个在series配置里面加上symbolSize便可:
series: [ { ... symbolSize: function (val) {//根据数值大小控制点的大小 return val[2] / 10; }, ... },
效果这样
二、改变点的颜色和新增图示等,在option加上下面部分
var option = { title: { text: '全国主要城市空气质量', left: 'center', textStyle: { color: '#fff' } }, //提示框组件 tooltip : { trigger: 'item' }, //图例组件 legend: { /*orient: 'vertical', y: 'bottom', x:'right', data:['pm2.5'], textStyle: { color: '#000' }*/ }, visualMap: { min: 0, max: 300, calculable: true, inRange: { color: ['#ABCDEF', '#99CC99'] }, textStyle: { color: '#fff' } }, geo:{ ... } series:[ ... ] }
三、改变前面五大数值点的样式,首先要计算出前面五大数据,而后根据这五大数据另外添个data数据显示,以下面代码,在series再添加个配置:
series: [ { //前面说过的配置 }, //后面新增配置 { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 5)), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#99CC99', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ] };
到此就完成整个配置了:
固然,还有不少配置项的操做能够控制整个地图变成你想要的样子,官方配置项文档就能够查看,这里就不一一列举了,举个例子给大家引导下怎么玩地图,如果以为不错的请赏个赞!!!