前记：离上一篇博客的发布已经过去两个月了，这期间总想写点什么，却怎么都写不出来，一直拖到了现在。现在的感觉，不是像这期间一样，想好好整理一番，写一篇好博客，却写不出来。事实发现，随心就好，较好的博客，需要深入的技术，现在能力还不够，只能把所遇到的问题写出来，整理一下就好。周五了，一天过去了一半，利用闲下来的时间，把这些天遇到的问题整理一下吧。
一、地图标点（以青岛地图为例）
地图标点有两种方法（两种地图的展现方式）
准备工作：
- 下载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:\MyChromeDevUserData2.在属性页面中的目标输入框里加上 --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 2 3 4 5 6 7 8 9 10 11 12 13 14 193 194
效果图如下：
具体的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} {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: false55 },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.568 },69 borderWidth: 5,70 shadowBlur: 4071 72 73 }74 },75 data: [{76 value: 077 78 }]79 }80 ]81 };
echarts图表很有趣，对数据可视化感兴趣的可以体验体验，看着一些大神做出来的图表，佩服的五体投地。贴张图分享下~
网址：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
5.5 星期五 【完】