echarts 地图和条形图结合
时间: 2024-12-30 19:26:37 浏览: 54
### 结合ECharts地图和条形图
为了实现ECharts中的地图与条形图的组合显示,可以采用双视图的方式,在同一页面的不同区域分别渲染这两种类型的图表。另一种方法是在地图中标记特定位置并关联到条形图的数据点,从而形成一种联动效果。
#### 方法一:创建独立的地图和条形图实例
这种方式较为简单明了,适合初学者理解两种图表各自的特性和配置方式。下面是一个简单的例子来说明如何在同一HTML文档中嵌入两个不同的ECharts实例[^1]:
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main-map" style="width: 50%; height: 48vh; float:left;"></div>
<div id="main-bar" style="width: 50%; height: 48vh; float:right;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChartMap = echarts.init(document.getElementById('main-map'));
var myChartBar = echarts.init(document.getElementById('main-bar'));
optionMap = {
series : [
{
name: '某省份销量',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
data:[
{name:'北京',value:95},
{name:'天津',value:77}
]
}
]
};
optionBar = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150],
type: 'bar'
}]
};
myChartMap.setOption(optionMap);
myChartBar.setOption(optionBar);
window.onresize = function () {
myChartMap.resize();
myChartBar.resize();
};
</script>
</body>
</html>
```
#### 方法二:利用地理坐标系组件Geo结合柱状图
此法更高级一些,它允许开发者在一个单独的地图画布上叠加其他形式的统计图形,比如条形图。这通常涉及到`geo`系列以及自定义绘图功能的应用[^2]。
对于具体的编码实践,可以通过设置`series`属性下的子项为`type='effectScatter'`或`type='scatter'`配合`markLine`标记线条特性达成类似的效果;而对于条形图,则需借助`custom`系列完成定制化需求[^3]。
阅读全文
相关推荐

















