echarts4.2.0 svg渲染器下文字异常echarts styleJson': [{ 'featureType': 'water配置项内容和展示
配置项如下
option = {
bmap: {
center: [116.46, 39.92],
zoom: 10,
roam: true,
mapStyle: {
'styleJson': [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#031628'
}
},
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#000102'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#0b3d51'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#08304b'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -70
}
},
{
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#857f7f'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'color': '#062032'
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#465b6c'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}
]
}
},
series: [{
type: "lines",
coordinateSystem: "bmap",
polyline: true,
data: [{
coords: [
[116.4383, 40.1471],
[116.4372, 40.1458],
[116.4373, 40.1409],
[116.4347, 40.1395],
[116.4446, 40.1225],
[116.445, 40.1189],
[116.4537, 40.1187],
[116.4553, 40.1046],
[116.4551, 40.1031],
[116.4504, 40.1025],
[116.4336, 40.1016],
[116.4334, 40.1038],
[116.426, 40.1034],
[116.4122, 40.1044],
[116.4134, 40.0892],
[116.4143, 40.0837],
[116.4126, 40.0726],
[116.4139, 40.055],
[116.4119, 40.0512],
[116.412, 40.0455],
[116.4151, 40.0401],
[116.4179, 40.0316],
[116.4174, 40.019],
[116.4161, 40.0128],
[116.4162, 40.0104],
[116.4078, 40.0095],
[116.4075, 39.9877],
[116.409, 39.9883],
[116.4168, 39.9885],
[116.4172, 39.9833],
[116.4242, 39.9834],
[116.4249, 39.9692],
[116.4348, 39.9694],
[116.4369, 39.9689],
[116.4598, 39.9539],
[116.4614, 39.9516],
[116.4614, 39.9336],
[116.4782, 39.9337],
[116.4778, 39.908],
[116.486, 39.908],
[116.4893, 39.9058],
[116.4971, 39.9078]
],
lineStyle: {
color: "rgba(223,90,90,1)"
}
}],
silent: true,
lineStyle: {
opacity: 0.2,
width: 1
}
}, {
type: "lines",
coordinateSystem: "bmap",
polyline: true,
data: [{
"coords": [
[116.4383, 40.1471],
[116.4372, 40.1458],
[116.4373, 40.1409],
[116.4347, 40.1395],
[116.4446, 40.1225],
[116.445, 40.1189],
[116.4537, 40.1187],
[116.4553, 40.1046],
[116.4551, 40.1031],
[116.4504, 40.1025],
[116.4336, 40.1016],
[116.4334, 40.1038],
[116.426, 40.1034],
[116.4122, 40.1044],
[116.4134, 40.0892],
[116.4143, 40.0837],
[116.4126, 40.0726],
[116.4139, 40.055],
[116.4119, 40.0512],
[116.412, 40.0455],
[116.4151, 40.0401],
[116.4179, 40.0316],
[116.4174, 40.019],
[116.4161, 40.0128],
[116.4162, 40.0104],
[116.4078, 40.0095],
[116.4075, 39.9877],
[116.409, 39.9883],
[116.4168, 39.9885],
[116.4172, 39.9833],
[116.4242, 39.9834],
[116.4249, 39.9692],
[116.4348, 39.9694],
[116.4369, 39.9689],
[116.4598, 39.9539],
[116.4614, 39.9516],
[116.4614, 39.9336],
[116.4782, 39.9337],
[116.4778, 39.908],
[116.486, 39.908],
[116.4893, 39.9058],
[116.4971, 39.9078]
],
lineStyle: {
color: "rgba(223,90,90,1)"
}
}],
lineStyle: {
width: 0
},
effect: {
constantSpeed: 20,
show: true,
trailLength: 0.1,
symbolSize: 1.5
},
zlevel: 1
}]
};
option = {
bmap: {
center: [116.46, 39.92],
zoom: 10,
roam: true,
mapStyle: {
'styleJson': [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#031628'
}
},
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#000102'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#0b3d51'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#08304b'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -70
}
},
{
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#857f7f'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'color': '#062032'
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#465b6c'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}
]
}
},
series: [{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: [{name: '北京',value:[116.4383,40.1471,220]}],
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: 12,
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}]
}
var dom = myChart.getDom();
myChart.dispose();
myChart = echarts.init(dom, null, {renderer: 'svg'});
myChart.setOption(option);
截图如下
