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]
 / 

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板