echarts实现地图定时切换散点与多图表级联联动详
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于echarts实现地图定时切换散点与多图表级联联动的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
1. 摘要
最近做项目遇到个统计相关需求，一个页面中大概四个或更多图形统计，百度地图、饼图、柱状图、线型图。百度地图上显示所有店面在全国各地大概位置，目前暂定每省一个，在地图上显示散点。如默认显示郑州散点闪动，其他图形显示郑州相关数据；5秒切换下一个区域点，其他的图表数据对应改变。先上个图，各位有需要的可以再接着往下
2. 引入ECharts以及地图相关json
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts/jquery-1.11.2.min.js"></script> <script src="echarts/echarts.min.js"></script> <script src="echarts/china.js"></script> </head> </html>
3. 界面布局
一个页面中布局多个图表有几个形式可以参考处理。
第一种：在网页创建多个div用定位的方式，多个画布。此方法声明多个echarts对象，不再过多介绍，除非特别个性需求，不推荐使用。
第二种：一个div一个画布，一个option，多个series，调整图形x/y的百分百来定位图形显示到界面上的位置。本文用这个方法。
第三种：与第二种基本一样，最大的不同是每个图标上都可以有一个标题,多个optioins；也是多个画布，但推荐这种。网址参考：
options = [
// 第一个graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Revenue of CAN-LAX 2016-2017',
textStyle:{
fontSize:14
}
},
tooltip: { // 提示框组件
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['2016', '2017','Growing Rate'],
top:'18'
},
grid: {
left: '3%',
right: '5%',
bottom: '3%',
containLabel: true,
show: false // 网格边框是否显示，上和右边框
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, // 数据试图是否在控件中显示
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis: {
type: 'category',
boundaryGap: true, // 坐标轴两边留白
splitLine: { // 网格线 x轴对应的是否显示
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: [ // 双y坐标轴
{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // 网格线 y轴对应的是否显示
show: false
},
axisLabel: {
formatter: '{value}'
}
},
{
name: 'Growing\nRate (%)',
//nameLocation: 'start',
splitLine: { // 网格线 y轴对应的是否显示
show: false
},
min:0,
max: 300, // growing rate upper limit
type: 'value',
//top:10,
inverse: false,
axisLine: {
lineStyle: {
color: '#2f4554'
}
}
}],
series: [
{
name:'2016',
type:'bar',
color:'#00BFFF',
//stack: '总量',
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data:[1741.9, 977, 1742.2, 1431.1, 1636.2, 1447, 1711.7, 1921.2, 2609.6, 3332.6, 3647.3, 2498.1]
},
{
name:'2017',
type:'bar',
color: '#DC143C',
//stack: '总量',
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
data:[2609, 1162.9, 2942.9, 5174.6, 5114.4, 5065.8, 3956.1, 3691.1, 4637.6, 4603.8, 6401.1, 4988.4]
},
{
name:'Growing Rate',
type:'line',
yAxisIndex: 1, // yAxisIndex 1 表示第二个y轴，默认为0
color: '#FFD700',
//stack: '总量',
markPoint : {
data : [
{type : 'max', name : '最大值'},
//{type : 'min', name : '最小值'}
]
},
data:[49.8, 19, 68.9, 261.6, 212.6, 250.1, 131.1, 92.1, 77.7, 38.1, 75.5, 99.7]
}
]
},
// visualMap: { # 旁边会有 视觉映射组件
// type: 'continuous',
// dimension: 1,
// text: ['High', 'Low'],
// inverse: true,
// itemHeight: 200,
// calculable: true,
// min: -2,
// max: 6,
// top: 60,
// left: 10,
// inRange: {
// colorLightness: [0.4, 0.8]
/ 上一篇：使用Nuxt.js改造已有项目的方法
下一篇：详解Nuxt.js部署及踩过的坑