关于echarts的那些事（地图标点，折线图，饼图）
2017-05-06 00:45
357 查看
前记：离上一篇博客的发布已经过去两个月了，这期间总想写点什么，却怎么都写不出来，一直拖到了现在。现在的感觉，不是像这期间一样，想好好整理一番，写一篇好博客，却写不出来。事实发现，随心就好，较好的博客，需要深入的技术，现在能力还不够，只能把所遇到的问题写出来，整理一下就好。周五了，一天过去了一半，利用闲下来的时间，把这些天遇到的问题整理一下吧。
一、地图标点（以青岛地图为例）
地图标点有两种方法（两种地图的展现方式）
准备工作：
下载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格式传出来。（这些数据困扰了我一天多。。。）
准备工作已经好了，接下来开始页面内容：
效果图如下：
具体的echarts配置请参考echarts文档：http://echarts.baidu.com/option.html#title
另一种地图标点可以试着做一下哦！
二、折线图
折线图的准备工作只是下载echarts文件。
以下是代码：
值得注意以下：如果想要图表自适应，跟bootstrap连用，千万别忘了这句话：
三、饼图
给出这张设计图，难点应该是外面的圈了吧！
这里问了echarts是群里的大神，然后看了配置文档，做了出来，（思想是做了两个饼图，大的是饼图中的圆形图）贴出代码：
echarts图表很有趣，对数据可视化感兴趣的可以体验体验，看着一些大神做出来的图表，佩服的五体投地。贴张图分享下~
网址：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
一、地图标点（以青岛地图为例）
地图标点有两种方法（两种地图的展现方式）
准备工作：
下载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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于echarts的那些事（地图标点，折线图，饼图）
- 关于echarts地图下钻。
- 关于百度地图百度、导航集成的那些额外问题
- echarts动态数据获取展示（地图，折线图）
- 敲黑板!!!! 关于那个echarts 地图的 剥壳儿
- 关于echarts加载地图时好时坏的问题
- 关于ECharts插件实现中国地图效果的总结
- 关于echarts的地图的渲染，根据一个值去判断地图上的点是否该报警！
- echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）
- 关于Echarts地图扩展百度地图的操作详解
- 关于echarts省份地图不显示
- 关于百度echarts map地图的使用之分布图
- echarts关于地图和柱状图的结合展示
- 关于物联网、谷歌潮人地图以及mapGIS进军西安的新闻
- 09秋季IDF：那些有关于上网本的猜想
- 关于Zend Server的那些事
- 关于2D地图加载的问题。
- 比如这个input.txt文件中的字符串：...把他们去掉那些空格，标点，换行符等，读取到数组word[MAX]中。
- 向园子的高手们求救 关于45斜视地图的寻路
- 关于文件类型关联的那些事