关于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"> ...
随机推荐
- warning: in-class initialization of non-static data member is a C++11 extension [-Wc++11-extensions]
struct test{int a=1111111; }test; vincentdeMacBook-Air:datasturte vincent$ g++ struct.cpp -o structp ...
- 简学Python第六章__class面向对象编程与异常处理
Python第六章__class面向对象编程与异常处理 欢迎加入Linux_Python学习群 群号:478616847 目录: 面向对象的程序设计 类和对象 封装 继承与派生 多态与多态性 特性p ...
- [原创]ASM动态修改JAVA函数之函数字节码初探
ASM是非常强大的JAVA字节码生成和修改工具,具有性能优异.文档齐全.比较易用等优点.官方网站:http://asm.ow2.org/ 要想熟练的使用ASM,需要对java字节码有一定的了解,本文重 ...
- 对VC++6.0爱得深沉（一）安装vc++6.0，支持winXP，win7，win8.1,win10
[欢迎入坑] 从这里起,我称VC++6.0为小c. 为什么我对小c爱得深沉? 虽然饱受非议,但是,我只想说,我太单纯,小c轻轻松松成功运行在各个win平台,对于我来说她:高速.小巧.便捷.听话.可定制 ...
- 对于自定义标签类中JspBody类的invoke方法的理解
下面是javaeeAPI中对于invoke()方法的介绍: 其中的参数out是一个Writer类的对象,如果写null,就是将标签体内容写到了与此jsp相关联的JspWriter对象,也就是下面的w: ...
- Ef+T4模板实现代码快速生成器
转载请注明地址:http://www.cnblogs.com/cainiaodage/p/4953601.html 效果如图,demo(点击demo可下载案例) 项目结构如图 T4BLL添加BLL.t ...
- Brackets--我的初恋编辑器
大学毕业以后,因为一些个人琐事没有找到自己专业的对口工作,整天混混沌沌得过着也没有打破现状的决心和机会.但是每当独自思考的时候总是一阵阵的害怕,怕自己从此一事无成一无所有.于是在某个心潮澎湃的瞬间开始 ...
- linux系统各种乱码问题
linux系统乱码问题 最近使用ubuntu操作系统(客户端)在ssh连接linux服务器的时候发现乱码问题,但是本机查看中文显示中文没有问题,只是在使用终端more查看本地或远端gbk之类中文编码的 ...
- Androidstudio2.0.0汉化教程及汉化包。
()Eric为大家带来Androidstudio2.0.0的简单汉化教程,许多小伙伴喜欢使用中文版的AS那么没有中文的AS只能靠自己汉化取得更好的体验. 第一步下载AS2.0.0汉化包,我有链接给大家 ...
- JPlayer Jquery video视频插件
近日一直在搜关于视频的jquery插件,要求功能全,跨平台,百思不得其解,偶尔找到一个插件JPlayer,国产的,很全.为什么选择JPlayer 简单:几分钟就可以上手编码.部署 可定制:可以方便地用 ...