"
附上代码,为啥lines里的label设置了,但是无效呢???求大神解释,么么哒~
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>lines测试</title>
</head>
<body>
<div id="main" style="width: 600px;height: 600px;"></div>
<script src="Common/JS/jquery2.1.min.js"></script>
<script src="Common/JS/echarts.js"></script>
<script src="Common/JS/echarts-map-world.js"></script>
<script>
var dom = document.getElementById("main"); //初始化echarts
myChart = echarts.init(dom);
var data = [
{'name':"线路一",'coords':[[129.450272, 20.8844452],[129.450272, 29.8844452],[111.450272, 38.8844452]]},
{'name':"线路二",'coords':[[130.450272, 20.8844452],[130.450272, 29.8844452],[130.450272, 38.8844452]]},
{'name':"线路三",'coords':[[111.450272, 20.8844452],[111.450272, 28.8844452],[111.450272, 30.8844452]]}
]
myChart.setOption({ //map底图
backgroundColor: '#a7c0df',
tooltip: { //提示框
formatter: function(params) {},
},
legend: {
show: false,
orient: 'vertical',
top: 50,
right: 10,
selected: {},
data: [],
textStyle: {
color: '#FFF0F5'
}
},
geo: {
map: 'world', //地图类型——世界
roam: true,
label: {
emphasis: {
show: false //高亮时是否显示地域名称
}
},
zoom: 7.5, //地图视角比例
center: [109.97, 35.71], //当前视角的中心点
boundingCoords: [ //二维数组,定义定位的左上角以及右下角分别所对应的经纬度
// 定位左上角经纬度
[-180, 90],
// 定位右下角经纬度
[180, -90]
],
scaleLimit: {
min: '1',
// max: '25'
},
itemStyle: {
//正常情况下的地图颜色和边框颜色
normal: {
areaColor: '#f4f3ef',
borderColor: '#cccccc',
borderWidth: 1,
opacity: 1,
// borderType:'dotted'
},
},
//图形上的说明文字
label: {
//正常情况下的地图颜色和边框颜色
normal: {
show: false,
},
//高亮情况下的
emphasis: {
show: false,
}
},
zlevel: -100,
silent: true
},
series: [{ //航线层
name: "线条",
type: 'lines',
polyline: true, //允许多个点
coordinateSystem: 'geo',
// zlevel: 100, //图层控制
large: true,
lineStyle: {
normal: {
color: {
colorStops: [{
offset: 0,
color: 'red' // 0% 处的颜色
}, {
offset: 1,
color: 'blue' // 100% 处的颜色
}],
},
width: 1.5, //调整航线粗细
}
},
data: data, //航线数据
label:{
normal:{
show:true,
position:'middle',
formatter: '{b}: {c}'
}
},
zlevel: 9999
}, ]
})
</script>
</body>
</html>
"
"
刚刚看了一下API,上面写的很清楚:在 <a href=""http://echarts.baidu.com/option.html#series-lines.polyline"" rel=""nofollow"">polyline 设置为 true
时无效,但是如果设置为false,可以显示label,就只能用于绘制只有两个端点的线段,如果想要两者兼容,有什么办法么
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。