// 背景颜色
// backgroundColor: "#404a59",
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item", // 触发类型。可选：'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用 'none'什么都不触发。
alwaysShowContent: false, // 是否永远显示提示框内容
backgroundColor: "#0C121C",
borderColor: "rgba(0, 0, 0, 0.16);",
hideDelay: 100, // 浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
triggerOn: "mousemove", // 提示框触发的条件，可选：'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'
enterable: true, // 鼠标是否可进入提示框
textStyle: {
color: "#DADADA",
fontSize: "12",
width: 20,
height: 30,
overflow: "break" // 文字超出宽度是否截断或者换行。配置width时有效
},
showDelay: 100 // 浮层显示的延迟
},
// 地图配置
geo: {
map: "jilin",
zoom: 1.2,
label: {
// 通常状态下的样式
show: true,
textStyle: {
color: "#fff"
}
// 鼠标放上去的样式
},
// 地图区域的样式设置
itemStyle: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial", // linear 线性渐变 radial 径向渐变
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10 // 模糊半径
},
// 鼠标放上去高亮的样式
emphasis: {
itemStyle: {
areaColor: "#389BB7",
borderWidth: 0
},
label: {
textStyle: {
color: "#fff"
}
}
}
},
// 数据渲染
series: [
{
type: "scatter",
coordinateSystem: "geo",
symbol: "pin", // 标记的图形。ECharts 提供的标记类型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
legendHoverLink: true, // 是否启用图例 hover 时的联动高亮。
symbolSize: [60, 60], // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
// 这里渲染标志里的内容以及样式
label: {
show: true,
formatter(value) {
return value.data.value[2];
},
color: "#fff"
},
// 标志的样式
itemStyle: {
normal: {
color: "rgba(255,0,0,.7)",
shadowBlur: 2,
shadowColor: "D8BC37"
}
},
// 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
// 至于如何展示，完全是靠上面的formatter来自己定义的
data: [
{ name: "白城", value: [122.5, 45.3, 1234] },
{ name: "吉林", value: [126.5, 43.31, 2345] }
],
showEffectOn: "render", // 配置何时显示特效。
rippleEffect: {
brushType: "stroke" // 波纹的绘制方式，可选 'stroke' 和 'fill'。
},
hoverAnimation: true,
zlevel: 1
},
{
type: "map",
map: "jilin",
zoom: 1.21,
label: {
// 通常状态下的样式
show: true,
textStyle: {
color: "#fff"
}
// 鼠标放上去的样式
},
// 地图区域的样式设置
itemStyle: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial", // linear 线性渐变 radial 径向渐变
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10 // 模糊半径
},
// 鼠标放上去高亮的样式
emphasis: {
itemStyle: {
areaColor: "#389BB7",
borderWidth: 0
},
label: {
textStyle: {
color: "#fff"
}
}
},
// 数据
data: [
{
name: "长春市",
value: "1202"
},
{
name: "吉林市",
value: "396"
},
{
name: "通化市",
value: "1125"
},
{
name: "四平市",
value: "635"
},
{
name: "白山市",
value: "586"
},
{
name: "辽源市",
value: "360"
},
{
name: "白城市",
value: "231"
},
{
name: "延边朝鲜族自治州",
value: "196"
},
{
name: "松原市",
value: "80"
}
]
}
]
// 添加水印
// graphic: {
// // 水印类型
// type: "text",
// // 相对于容器的位置
// left: "45%",
// top: "10%",
// // 样式设置
// style: {
// // 文本内容
// text: "create by yanzu",
// // 字体粗细、大小、字体
// font: 'bolder .5rem "Microsoft YaHei", sans-serif',
// // 字体颜色
// fill: "#fff"
// }
// },
// 视觉效果
// visualMap: {
// // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
// show: true,
// // 上下端文字
// text: ["高", "低"],
// // 最小值和最大值，必须指定
// min: 0,
// max: 6000,
// // 位置
// left: "10%",
// bottom: "10%",
// // 是否展示滑块
// calculable: true,
// // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置
// seriesIndex: [1],
// // 从下到上的颜色
// inRange: {
// color: ["#00467F", "#A5CC82"]
// },
// //字体颜色
// textStyle: {
// color: "#fff",
// map: "jilin"
// }
// }
};
