mysql 百度地图插件_百度地图插件Echart学习积累
Echars 葵花宝典
option = {
color:
['#3398DB'],//设置图形背景颜色
title: {
text:'总用户数按月分布(12月)',//标题名称
left:59,//标题放置位置
textStyle:{//
color:"#4983ff",//标题颜色
}
},
tooltip : {
trigger: 'axis',//item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用; axis:柱状图，折线图等会使用类目轴的图表中使用
axisPointer : {// 坐标轴指示器，坐标轴触发有效
type : 'shadow'// 默认为直线，可选为：'line' | 'shadow'
},
formatter:
"{b}:{c}",//鼠标移到上面显示的信息
},
legend: {
orient:
'vertical',
left:
'left',//菜单导航放置位置
data:['iphone3']
},
grid: {//设置图形四周的空格的宽度
left: '3%',//左边留空3%
right:
'4%',//右边留空4%
bottom:
'3%',//下边留空3%
containLabel: true,//grid
区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器又比较小无法预留较多空间的时候，可以设为 true
防止标签溢出容器。
},
visualMap:
{//
left:
'left',//位置
top:
'bottom',//位置
min:
10000,//
max:
50000,//
text:
['高','低'], //
calculable:
true,// 文本，默认为数值文本//
show:false,//是否显示
inRange:
{//
color:
['rgb(236,204,150)','rgb(232,189,143)','rgb(204,99,96)'],//地图背景颜色设置
},
},
xAxis : [
{
type : 'category',//value:数值轴，适用于连续数据。 category:
类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
//time:
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
//'log'
对数轴。适用于对数数据。
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat',
'Sun'],//X轴坐标名称
axisTick: {
alignWithLabel:
true,//X轴坐标刻度对应位置，一从0开始，二图形中间起
},
position:'bottom',//默认显示在X轴下方，属性有：top,bottom!
axisLabel:{
interval:0,//每个X轴的名称都显示出来，1,2,3等
rotate：20,//倾斜度
textStyle:{
fontWeight:'bolder',//文本加粗
},
formatter:function(val){
return
val.split("").join("\n");//X轴名称切割，1字排列
}
},
splitLine:{,
show:false,//隐藏X轴分割线,
},,
axisTick:false,//隐藏X轴刻度标记,
axisLine:{,
lineStyle:{,
color:'#aaaebf',//修改X轴箭头颜色,
},
},
}
],
yAxis : [
{
type
: 'value',//'value'
数值轴，适用于连续数据。
'category'
类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time'
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log'
对数轴。适用于对数数据。
splitLine:{
show:false
},
position:'left',//默认显示在Y轴左方，属性有：left,right!
axisTick:{
show:false,//隐藏Y轴刻度标记
},
axisLabel: {
formatter:
'{value}万',//在Y轴给数值加个单位
textStyle:{
fontSize:8,//设置字体大小
},
},
axisLine:{
show:false,//隐藏Y分割线
},
splitLine:{
lineStyle:{
color:'#ececec',//线颜色
}
}
}
],
series : [
{
name:'直接访问',
type:'bar',//bar:柱状图， line：折线图， map：地图
mapType:'china',//引入地图js
barWidth:
'60',//柱状图的宽度
data:[10,
52, 200, 334, 390, 330, 220],
mapLocation:{//调整地图的大小
height:'100%',//高度
width:'80%',//宽度
},
itemStyle:{
normal:{
//borderColor:'#fff'点颜色 ；地图
color:"none"//线颜色 ；地图
}
},
label:{
normal:{
show:true,//显示结果集
position: 'top',//移动结果的在柱状图的位置
，左右，上下,属性有：'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
textStyle:{
color:'red',//结果集字体颜色
fontWeight:'bolder',//结果集字体样式
}
}
},
symbol:'circle',//折线图设置实心点
symbolSize:20,折线图设置实心点大小
smooth:true,//表示折线是光滑的
itemStyle:{
normal:{
color:'#f17a52',//设置点的颜色
},
emphasis:{,
areaColor:'#456ac5',//鼠标移到地图所在域的颜色,
},
},
}
]
};