关于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"> ...
随机推荐
- idea调试SpringMvc, 出现：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener错误的解决办法
有时,使用idea开发SpringMvc发现调试时出现以下错误: 12-Mar-2017 12:08:02.345 严重 [RMI TCP Connection(2)-127.0.0.1] org.a ...
- 小梦windows phone 8.1开发：语音朗读
使用SpeechSynthesizer类可以实现文本朗读功能,位于 Windows.Media.SpeechSynthesis命名空间.有了它我们就可以实现有声小说了,是不是很爽.下面给出一个将文本块 ...
- 单发邮箱 群发邮箱 程序 Email winform
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- jQuery 事件——关于select选中
场景: eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等... 此时,若使用Select下拉列表进行状态选择,并在选中具体项值后,通过Ajax异步提交, ...
- python编码问题之\"encode\"&\"decode\"
python encode decode 编码 decode的作用是将其他编码的字符串转换成unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换 ...
- dotweb——go语言的一个微型web框架（一）
dotweb是16年正式托管到github的一个开源项目,go语言的web框架目前也有很多,出名的有bee和echo.它们都是很优秀的框架,但是我们喜欢更轻.更小的东西,经历一些之后我们更青睐微服务这 ...
- unity插件开发——AssetDatabase
AssetDatebase也是一个静态类,他的作用是管理整个工程的所有文件(一般成为“资产”).直观地说就是管理整个project窗口中的所有内容,比如,你可以增加.删除.修改文件等等. 这里有几个常 ...
- div的优缺点
div+css优缺点 产生背景 HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化.专用化.即标记越来越多,甚至各个浏览器生产商也开发出只适合于其特定浏览 ...
- jQuery购物车
效果图 HTML代码:(非表格方式) <div class="nav2"> <input type="checkbox" class=&quo ...
- 解决vagrant up启动失败，停留在Booting VM...过程的方法
如图,这种情况是因为没有正确关闭虚拟机导致的,关闭时应在命令行使用vagrant halt 命令,如果直接关机便会出现这种情况. 解决办法:直接启动VirtualBox,并在命令行vagrant ha ...