echarts实现地图定时切换散点与多图表级联联动详

网络编程 2021-07-04 16:46www.168986.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部署及踩过的坑

echarts实现地图定时切换散点与多图表级联联动详

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

echarts实现地图定时切换散点与多图表级联联动详

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设