echart热力图项目

之前项目中运用echart热力图，在这里记录一下。

项目中如何实践echart

echart应用到项目起来很简单，大概分为以下几步：

1. vue项目中下载echart：npm install echarts --save
2. 在组件中导入：import echarts from ‘echarts’
3. 给定一个有宽高的容器作为echart的画布如：

   <div class="echart-map"></div>
   

4. echart的配置文件，是一个对象，一般会在echart官方实例网址上尝试调试好，再放到代码里。实际使用上，先通过init方法初始化echart，再通过setOption方法设置option对象。

   	let myArea = echarts.init(document.getElementsByClassName('echart-map')[0])
   	myArea.setOption(this.optionArea)
   

   至此已经完成echart画图。关于option，我的实际经验，会分成两部分：将静态的，不会发生变化的，或者是被不同的图通用的配置放到一个公共的js文件里；对于需要根据接口调用后动态生成的，或者同一种图，细微不同呈现方式的部分，放到实际的组件代码里，最后在setOption之前组装。这样既能满足公共配置封装，又能保持灵活性。
5. 如果echart容器大小是需要动态变化的，比如使用了百分比，还需要在窗口大小变化时，调用resize方法实现适配

   window.onresize = () => {
        
   	let myRank = echarts.init(document.getElementsByClassName('echart-rank')[0])
   	myRank.resize()
   }
   

核心功能简介

项目中实现的功能，这里抽取出来核心功能并对实际业务进行抽离，主要要做一个如下的可视化展示功能：

可以看到，左上角可以切换展示的指标（ind1 - ind9）。切换时，按当前指标在左侧排名区域从大到小展示柱状图，排名前三的省用了一个高亮的渐变色表示；右侧热力地图按照当前指标数据展示。此外，当悬停左侧一个柱子时，进行黄色高亮，同时右侧地图相应省市也高亮为黄色，当点击一个柱子时，当前柱子变为橙色，同时右侧地图也将该省标橙色；反之在热力地图上操作也是类似更新柱状图区域。在柱状图上部有一个将整个可视化区域导出为图片的功能

排行柱状图

柱状图默认是横向的，首先这里要将y轴翻转，option中设置

  yAxis: {
   
	...
    inverse: true,
	...
  }

在布局方面，运用到了grid，并做了如下设置：

  grid: {
   
    top: 0,
    left: 92,
    right: 0,
    bottom: 0
  }

采用这个设置的原因，首先我们的柱状排行图需要在纵向上排满整个画布区域，如果不采用grid布局并将top、bottom设置为0，echart将默认将顶部和底部留空，这样达不到我们的目的。在运用grid的基础之上，这里我们就有机会通过设置画布的高度控制每个柱字整体所占据的宽度。

设置柱子的宽度
echart的柱状图是不能够直接控制柱子的宽度的，要精确控制每个柱子所占的宽度，我们可以变相思维，通过控制echart的高度，并将grid的top、bottom设置为0，然后设置画布的高度来实现我们期望的柱子宽度。
以本例来说，我们希望每个柱字整体占据的宽度为20px（并不是柱子本身的宽度，而是echart为每一个柱子区域实际分配的宽度，包含柱子本身以及上下空白部分，如下图所示部分）

这样我们只需要计算出我们有多少个省，然后将画布高度设置为：省市个数 * 20(px)即可。本例中首先在css设置画布为680px（34个省 * 20），然后根据当前接口返回数据个数进行动态调整：

	if (this.rankData.length < 34) {
   
    	// 如果数据不足34项排行重新设置echart高度为数据个数*20
        document.getElementsByClassName('echart-rank')[0].style.height = this.rankData.length * 20 + 'px'
    }

再画布外层包了一个固定高度的容器，并设置为overflow-y: scroll，当画布超出外层高度时，出现滚动条。这样设置以期在大屏上，我们能够完美展示34个省，没有滚动条࿰