关于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
}]
}
]
};
echarts图表很有趣，对数据可视化感兴趣的可以体验体验，看着一些大神做出来的图表，佩服的五体投地。贴张图分享下~
网址：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
5.5 星期五 【完】
关于echarts的那些事（地图标点，折线图，饼图）的更多相关文章
- Echarts动态加载柱状图和折线图混合展示的实例
一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...
- echarts在数据改变后，折线图并没有全部刷新
在做一个BI项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
- Echarts 简单报表系列二：折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- eCharts 折线图，动态绑定数据不更新图表的问题，
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
- echarts实现折线图
前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...
- AChartEngine 安卓折线图 柱形图等利器
http://www.eoeandroid.com/thread-548233-1-6.html 最近公司项目中要用到折线图,状态类型的图标要用到折线图,柱形图等,并且能够动态显示,在网上找了许多de ...
- 百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- 深入浅出ECharts系列 （二） 折线图
深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a) 首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
随机推荐
- BFS－基础简单的算法
前言 有时候,当你并不了解很多高级算法的时候,搜索不失为一种解决问题的好方法,而且很多高级算法有或多或少的会用到搜索或者搜索的思想.可见,搜索是一个基础并且必须要掌握的算法. 在这篇文章中,会对BFS ...
- Linux运行级别简介
init 0 : 关机 init 1 : 单用户模式 root init 2 : 多用户模式 不能使用 net file system init 3 : 完全多用户模式 init 4 : 多用户的安 ...
- (14)jdk1.5开始的一些新特性：静态导入,增强for循环，可变参数，自动装箱/拆箱，枚举类型
Jdk1.5新特性之静态导入 jdk1.5新特性值静态导入 静态导入的作用:简化缩写 静态导入的作用:可以作用一个类的所有静态成员. 静态导入的格式:import static 包名.类名.静态的成员 ...
- 解读web服务器与php的工作原理
最近决定重读php手册(好吧,其实之前也没怎么读,尴尬脸),既然是重读,那就从php的安装开始咯,然后被手册中出现的各种新词搞懵逼了,什么cgi.fastcgi.sapi.fpm,苍天啊,这些都是什么 ...
- iOS开发之数据存储之Core Data
1.概述 Core Data框架提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite3数据库文件中,也能够将保存在数据库中的数据还原成OC对象.在此数据操作期间,不需要 ...
- iOS开发之UIApplication和delegate
1.概述 所有的移动操作系统都有个致命的缺点:app很容易受到打扰.比如一个来电或者锁屏会导致app进入后台甚至被终止. 还有很多其它类似的情况会导致app受到干扰,在app受到干扰时,会产生一些系统 ...
- css gray，grayscale，css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- CSS前端开发学习总结、一
1. 属性选择器: 2. CSS伪类选择器: 3. CSS伪元素: 4. CSS优先级: 5. 行内标签: 6. 块级标签: 7. Display: 8. Line-height:行高 9. text ...
- artemplate使用
最近写了一个菜谱展示的网页,其中用到了artemplate模板,关于artemplate的好处就不多说了,直接上干货 1. <script src="js/template-nativ ...
- web中关于垃圾回收的一些观点
感觉dom大神的解惑 关于引用计数法,注意引用的方向性就行. A.addEventListner(B.func), 那么是增加了A对B的引用.如果A是不可回收的对象,比如全局的Stage,或者单例. ...