关于echarts的那些事（地图标点，折线图，饼图）
前记：离上一篇博客的发布已经过去两个月了，这期间总想写点什么，却怎么都写不出来，一直拖到了现在。现在的感觉，不是像这期间一样，想好好整理一番，写一篇好博客，却写不出来。事实发现，随心就好，较好的博客，需要深入的技术，现在能力还不够，只能把所遇到的问题写出来，整理一下就好。周五了，一天过去了一半，利用闲下来的时间，把这些天遇到的问题整理一下吧。
一、地图标点（以青岛地图为例）
地图标点有两种方法（两种地图的展现方式）
准备工作：
- 下载echarts文件。（下载地址：http://echarts.baidu.com/download.html）
注意：建议下载完整包，不要自己构建。因为地图要跟冒泡图结合，有些需要东西，自己也不清楚，下个完整包就可以了。
- 青岛地图下载 （下载地址：http://ecomfe.github.io/echarts-map-tool/ 可以自己构建全国各省市地图）
上图给出两种构建地图的方法，特别注意的是引入json数据的时候，使用chrome打开的时候需要搭配跨域环境，请参考以前写的文章 http://www.cnblogs.com/wlpower/p/6370377.html，强调一点，如果方案一实现不了，可以根据这个方法 ：
版本号49之后的chrome跨域设置
chrome的版本升到49之后，跨域设置比以前严格了，在打开命令上加–disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器，登录后就会生成一个存储个人信息的目录，保存用户的收藏、历史记录等个人信息。49版本之后，如果设置chrome浏览器为支持跨域模式，需要指定出一个个人信息目录，而不能使用默认的目录，估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息（主要是cookie，很多网站的登录token信息都是保存在cookie里）。
具体做法为：
1.在电脑上新建一个目录，例如：C:\MyChromeDevUserData
2.在属性页面中的目标输入框里加上 –disable-web-security –user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。
3.点击应用和确定后关闭属性页面，并打开chrome浏览器。
再次打开chrome，发现有“–disable-web-security”相关的提示，说明chrome又能正常跨域工作了。
- 标点坐标数据
如果是少数标点，可以到百度地图ApI坐标拾取器查找。
如果是很多个，比如这些：
要是有坐标文件，就很方便，要是没有，只能一个一个找，四千八百多个坐标，我跟我另个同事找了好几天。。。
然后就是Excel表格数据转变成我们需要的格式：
有多种方法，一是：网上有在线Excel转换json格式，可以自动转换，只是坐标数据转换不是所需要的格式。另外的呢，可以跟后端沟通，把Excel上传数据库，然后以json格式传出来。（这些数据困扰了我一天多。。。）
准备工作已经好了，接下来开始页面内容：
1 <!DOCTYPE html> 2 <html style="height: 100%"> 3 <head> 4 <meta charset="utf-8"> 5 <script type="text/javascript" src="js/echarts.min.js"></script> 6 <script type="text/javascript" src="js/qingdao.js"></script> 7 <script type="text/javascript" src="js/mpda.js"></script> 8 <script type="text/javascript" src="js/geo.js"></script> 9 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 10 </head> 11 <body style="height: 100%; margin: 0"> 12 <div id="main" style="height: 800px"></div> 13 <br> 14 <script type="text/javascript"> 15 var chart = echarts.init(document.getElementById(\'main\')); 16 17 //因为数据比较多，这里只是举例参考 18 var data = [ 19 {"name":"青岛威达体育用品有限公司","value":"1000.00"}, 20 {"name":"青岛万福食品有限公司","value":"1804.76"}, 21 {"name":"青岛帅潮实业有限公司","value":"3000.00"}, 22 {"name":"青岛市琴岛电器有限公司","value":"1200.00"}, 23 {"name":"青岛普天电器有限公司","value":"6000.00"}, 24 {"name":"青岛龙兴机械有限公司","value":"200.00"}, 25 {"name":"青岛理研电线电缆有限公司","value":"1000.00"}, 26 {"name":"青岛胶南瑞源纸业有限公司","value":"500.00"}, 27 {"name":"青岛胶南惠丰机械有限公司","value":"100.00"}, 28 {"name":"青岛佳春机械有限公司","value":"500.00"} 29 ]; 30 var geoCoordMap = { 31 \'青岛威达体育用品有限公司\':[120.442145,36.353304], 32 \'青岛万福食品有限公司\':[120.501856,36.862275], 33 \'青岛帅潮实业有限公司\':[120.402697,36.218331], 34 \'青岛市琴岛电器有限公司\':[120.500757,36.417052], 35 \'青岛普天电器有限公司\':[120.083109,36.295657], 36 \'青岛龙兴机械有限公司\':[119.778027,36.997143], 37 \'青岛理研电线电缆有限公司\':[120.510292,36.309673], 38 \'青岛胶南瑞源纸业有限公司\':[120.02328,35.890329], 39 \'青岛胶南惠丰机械有限公司\':[119.918591,35.918377], 40 \'青岛佳春机械有限公司\':[120.010518,36.063161] 41 } 42 43 //获取数据和坐标 44 var convertData= function (data) { 45 var res = []; 46 for (var i = 0; i < data.length; i++) { 47 48 var geoCoord = geoCoordMap[data[i].name]; 49 50 if (geoCoord) { 51 res.push({ 52 name: data[i].name, 53 value: geoCoord.concat(data[i].value) 54 }); 55 56 } 57 } 58 return res; 59 }; 60 61 var option = { 62 backgroundColor: \'#404a59\', 63 title: { 64 text: \'青岛市企业分布\', 65 left: \'center\', 66 textStyle: { 67 color: \'#fff\' 68 } 69 }, 70 //提示框 71 tooltip : { 72 trigger: \'item\', 73 formatter: function (params) { //添加数字,否则为坐标 74 //console.log(params.value) 75 return params.name+\'<br>\'+\'注册资本\'+\'\'+\':\'+\'\'+params.value[2]+\'\'+\'万元\' 76 77 }, 78 padding:[ 79 5, // 上 80 10, // 右 81 5, // 下 82 10, // 左 83 ], 84 textStyle:{ 85 color: \'#fff\', 86 fontSize:\'13\' 87 } 88 }, 89 //图例组件 90 legend: { 91 orient: \'horizontal\', 92 //相等于left 、top、bottom、right 93 y: \'bottom\', 94 x:\'right\', 95 //这里的数据名称要和series中的name名称一样，否则不显示 96 data:[\'规上企业\'], 97 textStyle: { 98 color: \'#fff\' 99 } 100 }, 101 102 //地图 103 geo: { 104 map: \'qingdao\', 105 label: { 106 emphasis: { 107 show: false 108 } 109 }, 110 roam: true, 111 itemStyle: { 112 //正常状态下 113 normal: { 114 areaColor: \'#323c48\', 115 borderColor: \'#111\' 116 }, 117 //选定某一区域下 相当于 hover 118 emphasis: { 119 areaColor: \'#2a333d\' 120 121 } 122 123 }, 124 z:1 125 }, 126 //这里数据中主要是冒泡图数据 127 series : [{ 128 name: \'规上企业\', 129 type: \'scatter\', 130 coordinateSystem: \'geo\', 131 //标点的大小 132 data: convertData(data), 133 symbolSize: function (val) { 134 return val[2] / 30000; //也可以根据这里的数值更改大小 val[2] / x x越小，标点越大 135 }, 136 label: { 137 normal: { 138 formatter: \'{b}\', 139 position: \'right\', 140 show: false //根据需求可以更改标点标签是否显示 141 }, 142 emphasis: { 143 show: true 144 } 145 }, 146 itemStyle: { 147 normal: { 148 color: \'#ddb926\' 149 } 150 } 151 }, 152 { 153 name:\'上规企业\', 154 type: \'effectScatter\', 155 coordinateSystem: \'geo\', 156 data: convertData(data.sort(function (a, b) { //这里是多个数据比较大小 157 return b.value - a.value; 158 }).slice(0,1000)), //slice里面的数可以是0 ，意思是全部显示 0,1000 意思是显示这组数据中最大前1000组 159 symbolSize: function (val) { 160 return val[2] / 30000; 161 }, 162 163 showEffectOn: \'render\', 164 rippleEffect: { 165 brushType: \'stroke\' 166 }, 167 hoverAnimation: true, 168 label: { 169 normal: { 170 formatter: \'{b}\', 171 position: \'right\', 172 show: false 173 }, 174 emphasis: { 175 show: true 176 } 177 }, 178 itemStyle: { 179 normal: { 180 color: \'#f4e925\', 181 shadowBlur: 10, 182 shadowColor: \'#333\' 183 } 184 } 185 186 } 187 188 ] 189 }; 190 191 chart.setOption(option); 192 </script> 193 </body> 194 </html>
效果图如下：
具体的echarts配置请参考echarts文档：http://echarts.baidu.com/option.html#title
另一种地图标点可以试着做一下哦！
二、折线图
折线图的准备工作只是下载echarts文件。
以下是代码：
1 option = { 2 //这里如果不想用echart自动配置的颜色，可以设定一下 3 color: [\'#2ec7c9\', \'#b7a3de\', \'#5ab1ef\', \'#febd87\'], 4 5 tooltip: { 6 //触发类型 7 trigger: \'axis\' 8 }, 9 legend: { 10 data:[\'交易额\',\'交易笔数\',\'卡均交易额\',\'卡均交易笔数\'], 11 top:"3%" 12 }, 13 grid: { 14 15 left: \'3%\', 16 right: \'4%\', 17 bottom: \'10%\', 18 containLabel: true 19 20 }, 21 toolbox: { 22 feature: { 23 dataView:{ 24 iconStyle:{ 25 normal:{ 26 borderColor:\'#d87f3f\' 27 } 28 } 29 }, 30 restore:{ 31 iconStyle:{ 32 normal:{ 33 borderColor:\'#2a95ff\' 34 } 35 } 36 }, 37 38 magicType: { 39 type: [\'line\', \'bar\'], 40 iconStyle:{ 41 normal:{ 42 borderColor:\'#54c954\' 43 } 44 } 45 }, 46 //保存图片 47 saveAsImage: { 48 iconStyle:{ 49 normal:{ 50 borderColor:\'#4b0082\' 51 } 52 } 53 } 54 }, 55 right:\'6%\', 56 top:\'3%\' 57 }, 58 xAxis: { 59 type: \'category\', 60 boundaryGap: false, 61 axisLine:{ 62 show:true, 63 //可以给坐标轴设定颜色 64 lineStyle:{ 65 color:"#008acd", 66 width:2, 67 type:\'solid\' 68 } 69 }, 70 71 data: [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\'] 72 }, 73 yAxis: { 74 type: \'value\', 75 axisLine:{ 76 show:true, 77 lineStyle:{ 78 color:"#008acd", 79 width:2, 80 type:\'solid\' 81 } 82 }, 83 }, 84 series: [ 85 { 86 name:\'交易额\', 87 type:\'line\', 88 stack: \'总量\', 89 data:[120, 132, 101, 134, 90, 230, 210] 90 }, 91 { 92 name:\'交易笔数\', 93 type:\'line\', 94 stack: \'总量\', 95 data:[220, 182, 191, 234, 290, 330, 310] 96 }, 97 { 98 name:\'卡均交易额\', 99 type:\'line\', 100 stack: \'总量\', 101 data:[150, 232, 201, 154, 190, 330, 410] 102 }, 103 { 104 name:\'卡均交易笔数\', 105 type:\'line\', 106 stack: \'总量\', 107 data:[320, 332, 301, 334, 390, 330, 320] 108 } 109 ] 110 };
值得注意以下：如果想要图表自适应，跟bootstrap连用，千万别忘了这句话：
window.onresize = function(){
myChart.resize();
}
三、饼图
给出这张设计图，难点应该是外面的圈了吧！
这里问了echarts是群里的大神，然后看了配置文档，做了出来，（思想是做了两个饼图，大的是饼图中的圆形图）贴出代码：
1 option = { 2 color :[\'#2ec7c9\',\'#b6a2de\',\'#5ab1ef\',\'#ffb980\',\'#d87a80\',\'#8d98b3\',\'#e5cf0d\',\'#97b552\',\'#95706d\',\'#dc69aa\',\'#07a2a4\'], 3 title : { 4 text: \'交易额前10位卡产品\', 5 subtext: \'单位：万\', 6 x:\'center\' 7 }, 8 tooltip : { 9 trigger: \'item\', 10 formatter: "{a} <br/>{b} : {c} ({d}%)" 11 }, 12 13 series : [ 14 { 15 name: \'\', 16 type: \'pie\', 17 radius : \'60%\', 18 center: [\'50%\', \'50%\'], 19 data:[ 20 {value:335, name:\'卡1\'}, 21 {value:310, name:\'卡2\'}, 22 {value:234, name:\'卡3\'}, 23 {value:135, name:\'卡4\'}, 24 {value:1548, name:\'卡5\'}, 25 {value:335, name:\'卡6\'}, 26 {value:111, name:\'卡7\'}, 27 {value:222, name:\'卡8\'}, 28 {value:135, name:\'卡9\'}, 29 {value:321, name:\'卡10\'}, 30 {value:135, name:\'其他\'}, 31 ], 32 itemStyle: { 33 emphasis: { 34 shadowBlur: 10, 35 shadowOffsetX: 0, 36 shadowColor: \'rgba(0, 0, 0, 0.5)\' 37 } 38 }, 39 markArea:{ 40 itemStyle:{ 41 normal:{ 42 43 borderColor:\'#000\', 44 borderType:\'solid\' 45 } 46 } 47 } 48 }, 49 { 50 51 type: \'pie\', 52 //因为是需要圆形，所以提示框之类的都不显示 53 tooltip: { 54 show: false 55 }, 56 hoverAnimation: false, //鼠标移入变大 57 radius: [\'65%\', \'65.5%\'], //圆心空出的大小 58 itemStyle: { 59 normal: { 60 label: { 61 show: false, 62 position: \'outside\' 63 }, 64 labelLine: { 65 show: false, 66 length: 100, 67 smooth: 0.5 68 }, 69 borderWidth: 5, 70 shadowBlur: 40 71 72 73 } 74 }, 75 data: [{ 76 value: 0 77 78 }] 79 } 80 ] 81 };
echarts图表很有趣，对数据可视化感兴趣的可以体验体验，看着一些大神做出来的图表，佩服的五体投地。贴张图分享下~
网址：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
5.5 星期五 【完】
版权声明：本文为wlpower原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。