开发者社区> 问答> 正文

关于echarts的lines中的label的设置 - echarts报错

"

附上代码,为啥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>

 

" ![image.png](https://ucc.alicdn.com/pic/developer-ecology/bf7f9ffacfae4d28a00f29b10de23020.png)

展开
收起
montos 2020-05-29 23:44:29 1339 0
1 条回答
写回答
取消 提交回答
  • "

    刚刚看了一下API,上面写的很清楚:在 <a href=""http://echarts.baidu.com/option.html#series-lines.polyline"" rel=""nofollow"">polyline 设置为 true 时无效,但是如果设置为false,可以显示label,就只能用于绘制只有两个端点的线段,如果想要两者兼容,有什么办法么

    ######回复 <a href=""https://my.oschina.net/u/3713950"" class=""referer"" target=""_blank"">@西皮的人生 : 您好,请问这个问题你解决了吗?######<a href=""https://my.oschina.net/kener"" class=""referer"" target=""_blank"">@Kener-林峰 ,打扰了前辈,请问这个我该怎么解决比较好呢" image.png

    2020-05-29 23:44:43
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载