API上不是有吗?
option= {title: {
text:'山东省事业费开支情况',
textStyle:{fontSize: 20,fontWeight:'bolder',color:'#333'},
x:'center'
},
tooltip: {
trigger:'item'
},
legend: {
orient:'vertical',
x:'left',
data: ['开支比例']
},
dataRange: {
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'],
x:'right',
y:'bottom',
calculable : true
},
series: [
{
name:'开支比例',
type:'map',
mapType:'山东',
selectedMode: 'single',
itemStyle: {
normal: { label: { show:true },color:'black' },
emphasis: { label: { show:true} }
},
mapLocation:{x:'center',y:'center'},
mapValuePrecision:2,
roam:false,
data: [
{name: "烟台市",value: Math.round(Math.random()*1000)},
{name: "临沂市",value: Math.round(Math.random()*1000)},
{name: "潍坊市",value: Math.round(Math.random()*1000)},
{name: "青岛市",value: Math.round(Math.random()*1000)},
{name: "菏泽市",value: Math.round(Math.random()*1000)},
{name: "济宁市",value: Math.round(Math.random()*1000)},
{name: "德州市",value: Math.round(Math.random()*1000)},
{name: "滨州市",value: Math.round(Math.random()*1000)},
{name: '聊城市',value: Math.round(Math.random()*1000)},
{name: "东营市",value: Math.round(Math.random()*1000)},
{name: "济南市",value: Math.round(Math.random()*1000)},
{name: "泰安市",value: Math.round(Math.random()*1000)},
{name: "威海市",value: Math.round(Math.random()*1000)},
{name: "日照市",value: Math.round(Math.random()*1000)},
{name: "淄博市",value: Math.round(Math.random()*1000)},
{name: "枣庄市",value: Math.round(Math.random()*1000)},
{name: "莱芜市",value: Math.round(Math.random()*1000)}
],
geoCoord: {
"烟台":[120.78,37.63],
"潍坊":[119.14,36.64],
"临沂":[118.35,35.40],
"青岛":[120.50,36.45],
"济南":[117.20,36.98],
"莱芜":[117.70,36.38],
"滨州":[117.87,37.60],
"聊城":[115.96,36.51],
"日照":[119.32,35.61],
"泰安":[117.07,36.16],
"济宁":[116.88,35.45],
"枣庄":[117.36,35.00],
"淄博":[118.08,36.72],
"德州":[116.73,37.32],
"威海":[122.00,37.25],
"东营":[118.75,37.67],
"菏泽":[115.66,35.32]
}
},
{
name: '存在超支项目',
type: 'map',
mapType: '山东',
data:[],
markPoint : {
symbol:'star',
symbolSize : 10,
effect : {
show: true,
color:'red',
shadowColor:'red',
//period: 10,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name: "菏泽", value:500}
]
}
}
]
}
var ecConfig = require('echarts/config')
myChart.on(ecConfig.EVENT.CLICK, eConsole)
function eConsole(param){
alert(1111)
alert(param.name)
}
ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的.首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标.
地图类型的图表需要关注的元素
title:标题,显示这个地图所表示的名称
title: {
text: '清大云点亮中国',
subtext: 'Tsingda.Cloud',
sublink: 'http://www.eee114.com',
x: 'center',
y: 'top',
textStyle: {
color: '#fff'
}
}
toolbox:工具栏,显示一些显示的工具,放大,缩小,查看数据集,下载图像等
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
}
legend:图标显示,当series有多个地图时,这个值用到显示多个地图的图标,可以是横向显示和纵向显示
legend: {
x: 'left',
y: 'top',
data: ['在线', '离线'],//在线和离线对应的是series的名字
selectedMode: false,//选中悬浮
textStyle: {
color: '#fff'
}
}
series:地图显示,用来叠放显示地图,你可以定义多个,它们之间的关系是第一个在最上面,以此类推.
series: [
//默认
{
name: '底层模版',
type: 'map',
mapType: 'china',
data: provinceMap,
geoCoord: source,
itemStyle: {
normal: {
color: bgColor,
borderColor: "#eee",
label: {
show: true,
textStyle: {
color: "#fff"
}
}
}, emphasis: { color: "rgba(128, 128, 128, 0.5)" }
},
}]
markPoint:点标识,用来标识地图上的后,这些点通常是被存储在一个geoCoord对象上,这个对象是一个字典,这在文章开头已经介绍过.
markPoint: {//动态标记
large: true,//这个选项,悬浮自动失效
symbolSize: 2,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: onColor
}
},
data: []
}
markPoint里的data对象是这个地图上需要显示的点,它是一个字符型数组,用来存储geoCoord里的键!
setOption:将地图对象添加到指定的地图对象上
var myChart = echarts.init(document.getElementById('main'))
var option={}
myChart.setOption(option)
动态构建地图上的点标识markPoint
大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上,这样就可以动态在地图上标示点了
$.get("/map/GetOffMap", function (data) {
for (var i in data) {
option.series[0].geoCoord[data[i].longitude + "_" + data[i].latitude] = [parseFloat(data[i].longitude), parseFloat(data[i].latitude)]
option.series[1].markPoint.data.push({ name: data[i].longitude + "_" + data[i].latitude })
}
myChart.setOption(option)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)