关于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格式传出来。（这些数据困扰了我一天多。。。）

准备工作已经好了，接下来开始页面内容：

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/qingdao.js"></script>
<script type="text/javascript" src="js/mpda.js"></script>
<script type="text/javascript" src="js/geo.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 800px"></div>
<br>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('main')); //因为数据比较多，这里只是举例参考
var data = [
{"name":"青岛威达体育用品有限公司","value":"1000.00"},
{"name":"青岛万福食品有限公司","value":"1804.76"},
{"name":"青岛帅潮实业有限公司","value":"3000.00"},
{"name":"青岛市琴岛电器有限公司","value":"1200.00"},
{"name":"青岛普天电器有限公司","value":"6000.00"},
{"name":"青岛龙兴机械有限公司","value":"200.00"},
{"name":"青岛理研电线电缆有限公司","value":"1000.00"},
{"name":"青岛胶南瑞源纸业有限公司","value":"500.00"},
{"name":"青岛胶南惠丰机械有限公司","value":"100.00"},
{"name":"青岛佳春机械有限公司","value":"500.00"}
];
var geoCoordMap = {
'青岛威达体育用品有限公司':[120.442145,36.353304],
'青岛万福食品有限公司':[120.501856,36.862275],
'青岛帅潮实业有限公司':[120.402697,36.218331],
'青岛市琴岛电器有限公司':[120.500757,36.417052],
'青岛普天电器有限公司':[120.083109,36.295657],
'青岛龙兴机械有限公司':[119.778027,36.997143],
'青岛理研电线电缆有限公司':[120.510292,36.309673],
'青岛胶南瑞源纸业有限公司':[120.02328,35.890329],
'青岛胶南惠丰机械有限公司':[119.918591,35.918377],
'青岛佳春机械有限公司':[120.010518,36.063161]
} //获取数据和坐标
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 = {
backgroundColor: '#404a59',
title: {
text: '青岛市企业分布',
left: 'center',
textStyle: {
color: '#fff'
}
},
//提示框
tooltip : {
trigger: 'item',
formatter: function (params) { //添加数字,否则为坐标
//console.log(params.value)
return params.name+'<br>'+'注册资本'+''+':'+''+params.value[2]+''+'万元' },
padding:[
5, // 上
10, // 右
5, // 下
10, // 左
],
textStyle:{
color: '#fff',
fontSize:'13'
}
},
//图例组件
legend: {
orient: 'horizontal',
//相等于left 、top、bottom、right
y: 'bottom',
x:'right',
//这里的数据名称要和series中的name名称一样，否则不显示
data:['规上企业'],
textStyle: {
color: '#fff'
}
}, //地图
geo: {
map: 'qingdao',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
//正常状态下
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
//选定某一区域下相当于 hover
emphasis: {
areaColor: '#2a333d' } },
z:1
},
//这里数据中主要是冒泡图数据
series : [{
name: '规上企业',
type: 'scatter',
coordinateSystem: 'geo',
//标点的大小
data: convertData(data),
symbolSize: function (val) {
return val[2] / 30000; //也可以根据这里的数值更改大小 val[2] / x x越小，标点越大
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false //根据需求可以更改标点标签是否显示
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name:'上规企业',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) { //这里是多个数据比较大小
return b.value - a.value;
}).slice(0,1000)), //slice里面的数可以是0 ，意思是全部显示 0,1000 意思是显示这组数据中最大前1000组
symbolSize: function (val) {
return val[2] / 30000;
}, showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
} } ]
}; chart.setOption(option);
</script>
</body>
</html>

效果图如下：

具体的echarts配置请参考echarts文档：http://echarts.baidu.com/option.html#title

另一种地图标点可以试着做一下哦！

二、折线图

折线图的准备工作只是下载echarts文件。

以下是代码：

option = {
//这里如果不想用echart自动配置的颜色，可以设定一下
color: ['#2ec7c9', '#b7a3de', '#5ab1ef', '#febd87'], tooltip: {
//触发类型
trigger: 'axis'
},
legend: {
data:['交易额','交易笔数','卡均交易额','卡均交易笔数'],
top:"3%"
},
grid: { left: '3%',
right: '4%',
bottom: '10%',
containLabel: true },
toolbox: {
feature: {
dataView:{
iconStyle:{
normal:{
borderColor:'#d87f3f'
}
}
},
restore:{
iconStyle:{
normal:{
borderColor:'#2a95ff'
}
}
}, magicType: {
type: ['line', 'bar'],
iconStyle:{
normal:{
borderColor:'#54c954'
}
}
},
//保存图片
saveAsImage: {
iconStyle:{
normal:{
borderColor:'#4b0082'
}
}
}
},
right:'6%',
top:'3%'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine:{
show:true,
//可以给坐标轴设定颜色
lineStyle:{
color:"#008acd",
width:2,
type:'solid'
}
}, data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLine:{
show:true,
lineStyle:{
color:"#008acd",
width:2,
type:'solid'
}
},
},
series: [
{
name:'交易额',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'交易笔数',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'卡均交易额',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'卡均交易笔数',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
}
]
};

值得注意以下：如果想要图表自适应，跟bootstrap连用，千万别忘了这句话：

window.onresize = function(){
myChart.resize();
}

三、饼图

给出这张设计图，难点应该是外面的圈了吧！

这里问了echarts是群里的大神，然后看了配置文档，做了出来，（思想是做了两个饼图，大的是饼图中的圆形图）贴出代码：

option = {
color :['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa','#07a2a4'],
title : {
text: '交易额前10位卡产品',
subtext: '单位：万',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}, series : [
{
name: '',
type: 'pie',
radius : '60%',
center: ['50%', '50%'],
data:[
{value:335, name:'卡1'},
{value:310, name:'卡2'},
{value:234, name:'卡3'},
{value:135, name:'卡4'},
{value:1548, name:'卡5'},
{value:335, name:'卡6'},
{value:111, name:'卡7'},
{value:222, name:'卡8'},
{value:135, name:'卡9'},
{value:321, name:'卡10'},
{value:135, name:'其他'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
markArea:{
itemStyle:{
normal:{ borderColor:'#000',
borderType:'solid'
}
}
}
},
{ type: 'pie',
//因为是需要圆形，所以提示框之类的都不显示
tooltip: {
show: false
},
hoverAnimation: false, //鼠标移入变大
radius: ['65%', '65.5%'], //圆心空出的大小
itemStyle: {
normal: {
label: {
show: false,
position: 'outside'
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: 5,
shadowBlur: 40 }
},
data: [{
value: 0 }]
}
]
};