echarts 在地图上如何画统计图

dy2017 2020-07-01 01:38:21
需求 利用echarts在地图上画一个矢量线性统计图

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<style type="text/css">
html {
height: 100%;
width: 100%;
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#container {
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<div id="container"></div>
<script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var pt1s = [
[116.3205, 40.0613],
[116.3205, 40.0811],
[116.3205, 40.1009]
];
var pt2s = [
[116.3188, 40.0811],
[116.3700, 40.0811]
];
var pt3s = [
[116.3205, 40.0811],
[116.3215, 40.0821],
[116.3225, 40.0827],
[116.3235, 40.0831],
[116.3245, 40.0831],
[116.3249, 40.0833],
[116.3259, 40.0839],
[116.3269, 40.0845],
[116.3269, 40.0834],
]
var _data = [{
name: 'y轴',
coords: pt1s,
lineStyle: {
color: '#6ea500',
type: 'solid'
},
}, {
name: 'x轴',
coords: pt2s,
lineStyle: {
color: '#ff5500',
type: 'solid', //'dashed'
},
},
{
name: '数据',
coords: pt3s,
lineStyle: {
color: '#0000ff',
type: 'solid',
curveness: 1
}
}
]

var option = {
bmap: {
center: [116.3205, 40.0811],
zoom: 15,
roam: true,
},
series: [{
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: _data,
silent: false,
lineStyle: {
color: '#fff',
opacity: 1,
width: 2,
// type: 'solid',
// curveness: 1
}
}]
}
myChart.setOption(option, true);
</script>
</body>


目前效果

预期效果
...全文
6122 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
dy2017 2020-07-02
  • 打赏
  • 举报
回复
自己搞定了
dy2017 2020-07-01
  • 打赏
  • 举报
回复
高手求指教

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧