echarts中国地图配置部分
发布时间:2020-02-24 11:42:08
作者:ynkulusi
中国地图option配置部分
var option_chmap = {
"title": [
{
"text": "中国肺炎疫情地图",
"subtext": "ynkulusi.com",
"left": "center",
"top": "8%",
"textStyle": {
"color": "#555555",
"fontSize": 18
},
"subtextStyle": {
"fontSize": 12,
"color": "#000"
}
}
],
"toolbox": {
"show": true,
"orient": "vertical",
"left": "center",
"top": "center",
"feature": {
"saveAsImage": {
"show": true,
"title": "save as image"
},
"restore": {
"show": true,
"title": "restore"
},
"dataView": {
"show": true,
"title": "data view"
}
}
},
"tooltip": {
"trigger": "item",
"triggerOn": "mousemove",
"color": "white",
"axisPointer": {
"type": "line"
},
"textStyle": {
"fontSize": 14
},
"backgroundColor": "rgba(50,50,50,0.7)",
"borderColor": "#333",
"borderWidth": 0
},
"series": [
{
"name": param_mapdata.mapname, //'现存确诊数',
"mapType": 'china', //显示地图区域
"zoom": 1.25, //地图放大倍数
"selectedMode": false, //single,multiple;false鼠标点击移开后不会一直保持选中颜色
itemStyle: {
normal: {//未选中状态
borderWidth: 1,//边框大小
borderColor: 'grey',
areaColor: '#F0F0F0',//背景颜色
label: {
show: true, //显示名称
}
},
emphasis: { //也是选中样式,做了下级地图展示,取消选择效果
borderWidth: 1,
borderColor: 'dimgrey',
areaColor: 'white', //鼠标覆盖颜色,默认白色
//opacity: 0.5,
label: {
show: true,
textStyle: {
color: '#8800AA'
}
}
}
},
"type": "map",
"symbol": "circle", //标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
//可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
//可以通过 'path://' 将图标设置为任意的矢量路径。
"label": { //地图上显示省份名称标签
"normal": {
"show": true,
"position": "center",
//"formatter": "{b}\n{c}", //配置显示标签
"textStyle": {
"fontSize": 12
}
},
"emphasis": { //鼠标悬浮效果
"show": false,
"textStyle": {
"fontSize": 12
}
}
},
//"data": {{ mapdata.now_confirm|tojson }},
"data": param_mapdata,
"roam": false, //是否开启鼠标缩放和平移漫游;默认为 True,为True时,地图可以拖动和缩放;如果只想要开启缩放或者平移,可以设置成'scale'或者'move'
"showLegendSymbol": false, //是否显示地图标记红点,默认为 True.
}
],
"legend": [
{
"data": [
""
],
"selectedMode": "multiple", //图例选中模式,点击图例更改地图显示样式,可以为True或者False
"show": true,
//"left": "center",
//"top": "top",
"orient": "horizontal",
"textStyle": {
"fontSize": 12
}
}
],
"dataRange": {
show: true, //显示或隐藏
orient: "vertical", //默认'vertical'垂直,'horizontal'水平图例组件条的方向
padding: 5,
//图例每项之间的间隔。默认间隔为 10,横向布局时为水平间隔,纵向布局时为纵向间隔。
itemGap: 5,
//图例标记的图形宽度。默认宽度为 25
itemWidth: 25,
//图例标记的图形高度。默认高度为 14
itemHeight: 12,
//type: "continuous", //continuous连续,piecewise分段
x: '3.6%', //
y: 'bottom', //left,right,center,top,bottom,%
//text: ['高值','低值'],//该值存在会覆盖splitList中文本部分
textStyle: {
color: "#300000",
fontSize: 11,
},
dimension: 0, //指定用数据[data]的『哪个维度』映射到视觉元素上,默认映射到最后一个维度,不设定该选项默认值也是0;在直角坐标系中,x 轴为第一个维度(0),y 轴为第二个维度(1)
//自定义『分段式视觉映射组件』的每一段的范围,以及每一段的文字,以及每一段的特别的样式。
pieces: [ //splitList,pieces为分段列表,pieceList为连续列表;start,end可改为min,max
{min: 10000, label: "10000及以上", color: "#700000"}, //不指定 max,表示 max 为无限大(Infinity)
{min: 1000, max: 9999, color: "#AE0000"},
{min: 500, max: 999, color: "#E80000"},
{min: 100, max: 499, color: "#FF8000"},//#FE1080,#EE7600
{min: 10, max: 99, color: "#FFC1C1"},//#FFDA8E
{min: 1, max: 9, color: "#FFE0E0"},
{min: 0, max: 0, label: "0", color: "#00FF7F"},
// 不指定 min,表示 min 为无限小(-Infinity)
],
{#splitList: [#}
{# {start: 10000, label: '10000及以上', color: '#700000'},#}
{# {start: 1000, end: 9999, color: "#AE0000"},#}
{# {start: 500, end: 999, color: "#E80000"},#}
{# {start: 100, end: 499, color: "#FF8000"},//#FE1080,#EE7600#}
{# {start: 10, end: 99, color: "#FFDA8E"},#}
{# {start: 1, end: 9, color: '#FFE0E0'},#}
{# //{end: 0, label: '未感染地区', color: '#FFFFFF'}#}
{#],#}
{# //color: ['red','orange','green','blue']//值域颜色,最少两个#}
},
"animation": true, //是否开启动画
"visualMap": { //默认图例色条
"show": false, //是否显示默认图例色条组件条(不论true或false,颜色都能映射),上面启用了dataRange后改设置默认无效
"orient": "vertical", //默认'vertical',visualMap 组件条的方向。有'vertical', 'horizontal'可选
"type": "piecewise", //continuous图例连续,piecewise分段,设定为分段时要配置分段范围列表pieces
"pieces": [
{start: 10000, label: '10000及以上', color: '#700000'},
{start: 1000, end: 9999, color: "#AE0000"},
{start: 500, end: 999, color: "#E80000"},
{start: 100, end: 499, color: "#FF8000"},//#FE1080,#EE7600
{start: 10, end: 99, color: "#FFDA8E"},
{start: 1, end: 9, color: '#FFE0E0'},
//{end: 0, label: '未感染地区', color: '#FFFFFF'},
],
//"min": 0, //连续型设置最小最大值
//"max": 10000,
"text": [ //文本样式
"high",
"low"
],
"textStyle": {
"color": "#000",
"fontSize": 10, //图例文字大小
},
"inRange": { //如果分段型指定的min和max里带颜色属性,此处则无效
"color": [
//"white",//"#50a3ba",
"#FFFFE0",
"#FFC1C1",
"#FFA500",
"#9D3700",//"#eac763",
"#750000",//"#d94e5d",
//"black",
]
},
"calculable": true, //是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
inverse: false, //是否反转 visualMap 组件
precision: 0, //数据展示的小数精度,默认为0,无小数点
dimension: 0, //指定用数据的『哪个维度』,映射到视觉元素上。
//seriesIndex: 1, //指定取哪个系列的数据,即哪个系列的 series.data,默认取所有系列
hoverLink: true, //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值在图表中对应的图形元素,会高亮
zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
//"splitNumber": 3, //当上面设定为piecewise分段时,把颜色(inRange中color)划分为几个分段区域,默认为5
left: "3.6%", //left和top优先级高于right和bottom
right: "", //不指定默认该值不存在,按默认left为0处理
//top: "", //不指定数值,默认为0,优先级高于bottom
bottom: 0, //不指定默认该值不存在,按默认top为0处理
itemGap: 5,
itemHeight: 10,
itemWidth: 20,
backgroundColor:"transparent", //标题背景色
borderColor:"#000", //边框颜色
borderWidth:1, //边框线宽
"showLabel": true, //是否显示每项的文本标签
formatter: function (value) { //标签的格式化工具。
return '<' + value + '>'; // 范围标签显示内容。
}
}
};
分类:javascript
评论数:0
阅读数:1074