4.19 echarts-商家地图分部，及地图于散点图的结合-地图的点击事件-颜色的设置，根据数据的大小不同柱显示不同颜色的渐变-柱状图平移动画的实现

4.19 echarts-商家地图分部，及地图于散点图的结合-地图的点击事件-颜色的设置，根据数据的大小不同柱显示不同颜色的渐变-柱状图平移动画的实现

一.学习内容

1.1 商家地图分部，及地图于散点图的结合

1.显示中国地图

–获取中国地图矢量数据

–注册地图数据到 全局echarts对象中

–配置 geo

<script>
// 获取的是Vue环境之下的数据, 而不是我们后台的数据
import axios from 'axios'
export default {
......
 methods: {
   async initChart () {
     this.chartInstance = this.$echarts.init(this.$refs.map_ref, 'chalk')
     // 获取中国地图的矢量数据
     // http://localhost:8999/static/map/china.json
     // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台数据, 所以咱们不能使用this.$http
     const ret = await axios.get('http://localhost:8999/static/map/china.json')
     this.$echarts.registerMap('china', ret.data)
     const initOption = {
       geo: {
         type: 'map',
         map: 'china',
         top: '5%',
         bottom: '5%',
       }
     }
     this.chartInstance.setOption(initOption)

2.显示散点图

–获取散点数据

async getScatterData () {
    // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
    const { data: ret} = await this.$http.get('map')
    this.allData = ret
    this.updateChart()
}

–处理数据并且更新图表

updateChart () {
// 处理图表需要的数据
// 图例数据
    const legendData = this.allData.map(item => {
    	return item.name
    })
    // 散点数据
    const seriesArr = this.allData.map(item => {
        return {
            type: 'effectScatter',
            //指明散点图的坐标系统为geo
            coordinateSystem: 'geo',
            //涟漪效果
            rippleEffect: {
                scale: 5,
                brushType: 'stroke'//空心涟漪
            },
            name: item.name,
            data: item.children
        }
    })
    const dataOption = {
        //图例
        legend: {
        	data: legendData
        },
        	series: seriesArr
        }
    //地图于散点图的结合，将散点图数据注册到地图的全局echarts对象中
    this.chartInstance.setOption(dataOption)
},

1.2 地图的点击事件

目标: 实现点击某个地区进入当前当前的地图，双击后又回到中国地图

1. 给地图的全局对象绑定响应图表的点击事件, 并获取点击项相关的数据

async initChart () {
......
	this.chartInstance.on('click', arg => {
	// arg.name 就是所点击的省份名称, 是中文
})

2. 将资料中的 map_utils.js 复制到 src/utils/ 目录之下。就是将中文转化为拼英的模块代码，并可以获取到相关当前点击相关地区的矢量数据路径

   map_utils.js 文件中封装函数函数

export function getProvinceMapInfo (arg) {
  const path = `/static/map/province/${name2pinyin[arg]}.json`
  return {
      //地区拼英
    key: name2pinyin[arg],
      //地区路径
    path: path
  }
}

<script>
// 获取的是Vue环境之下的数据, 而不是我们后台的数据
import axios from 'axios'
import { getProvinceMapInfo } from '@/utils/map_utils'
export default {
......
methods: {
    async initChart () {
    ......
    this.chartInstance.setOption(initOption)
    this.chartInstance.on('click', async arg => {
    // arg.name 就是所点击的省份名称, 是中文
        //调用传入文件的函数，将当前点击的地区名传递给该函数，获取路径和地区拼英
        const provinceInfo = getProvinceMapInfo(arg.name)
        //获取当前点击地区的矢量数据
        const { data: ret } = await axios.get('http://127.0.0.1:8999' + provinceInfo.path)
        this.$echarts.registerMap(provinceInfo.key, ret)
    	this.chartInstance.setOption({
        geo: {
            	map: provinceInfo.key
            }
      	})
   	})
    	this.getScatterData()
    	}
   	}
}
</scrip

3. 回到中国地图

​ 绑定双击事件函数@dblclick="revertMap"

<template>
<div class='com-container' @dblclick="revertMap">
<div class='com-chart' ref='map_ref'></div>
</div>

export default {
......
methods: {
......
 revertMap () {
   const revertOption = {
     geo: {
       map: 'china'
     }
   }
   this.chartInstance.setOption(revertOption)
 }
  }
  }
}
</script>

4. 性能优化，例如：如果已经点击过安徽地区，而此地区的数据在第一次已经请求过数据，在次点击时就可以直接利用，这样可以减少请求发送的次数提高性能。

   所以想要直接利用请求过的数据，想要初始化一个对象将获取的数据存储在这个对象中

data () {
  return {
    chartInstance: null,
    allData: null,
    mapData: {} // 所获取的地区的地图矢量数据
  }
},
 methods: {
   async initChart () {
         this.chartInstance.on('click', async arg => {
        // arg.name 得到所点击的省份, 这个省份他是中文
        const provinceInfo = getProvinceMapInfo(arg.name)
        // 需要获取这个省份的地图矢量数据
        // 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在
        if (!this.mapData[provinceInfo.key]) {
          const ret = await axios.get('http://localhost:8999' + provinceInfo.path)
          this.mapData[provinceInfo.key] = ret.data
          this.$echarts.registerMap(provinceInfo.key, ret.data)
        }
      this.$echarts.registerMap(provinceInfo.key, this.mapData[provinceInfo.key])
        const changeOption = {
          geo: {
            map: provinceInfo.key   provinceInfo.key需要和registerMap中的第一个参数保持一致
          }
        }
        this.chartInstance.setOption(changeOption)
      })
   }
  }

1.3 颜色的设置，根据数据的大小不同柱显示不同颜色的渐变

通过itemStyle配置的，color属性，配置一个函数，返回相应的颜色渐变

实现：

1.首先将颜色存储在一个数组中

2.初始一个对象，用于接收一个区域范围内的颜色

3.根据数据的判断在此返回显现的颜色

4.判断完成后，返回颜色渐变器raphic.LinearGradient对百分之0 / 百分之100状态之下进行颜色赋值

 updateChart() {
   const colorArr = [
     ["#0BA82C", "#4FF778"],
     ["#2E72BF", "#23E5E5"],
     ["#5052EE", "#AB6EE5"],
   ];
    series: [
   {
     data: yDataArr,
     itemStyle: {
       color: (arg) => {
         //初始一个对象，用于接收一个区域范围内的颜色
         let showColor = null;
         if (arg.data > 300) {
           //获取大于300区域范围的颜色
           showColor = colorArr[0];
         } else if (arg.data > 200) {
           showColor = colorArr[1];
         } else {
           showColor = colorArr[2];
         }
         return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
               // 百分之0状态之下的颜色值
             offset: 0,
             color: showColor[0],
           },
           {
              // 百分之100状态之下的颜色值
             offset: 1,
             color: showColor[1],
           },
         ]);
       },
     },
   },
 ],
}

1.4 柱状图平移动画的实现

平移动画使用 dataZoom 中的 startValue 和 endValue 来实现

1.定义数据

export default {
data () {
    return {
        chartInstance: null,
        allData: null,
        //默认初始展示10条数据
        startValue: 0,
        endValue: 9
    }
}

2.将 startValue 和 endValue 应用在 dataZoom 上, 并隐藏滑块 dataZoom 的显示，

updateChart () {
......
const dataOption = {
    xAxis: {
    	data: provinceArr
    },
    dataZoom: {
        show: false,
        startValue: this.startValue,
        endValue: this.endValue
    },

3.启动和停止定时器，启动定时器，更改startValue 和 endValue ，滑动数据

增加 timerId 的变量, 并且增加一个方法 startInterval ,来控制 startValue 和 endValue 的值

<script>
export default {
data () {
return {
    chartInstance: null,
    allData: null,
    startValue: 0,
    endValue: 9,
    timerId: null
}
},
......
methods: {
......
startInterval () {
    if (this.timerId) {
       clearInterval(this.timerId)
	}
    //开启定时器
    this.timerId = setInterval(() => {
        this.startValue++
        this.endValue++
     //如果滑动到最后的数据将其回到初始状态
    if (this.endValue > this.allData.length - 1) {
        this.startValue = 0
        this.endValue = 9
    }
    this.updateChart()
    }, 3000)
    }
    }
}

4.获取数据之后启动

async getData () {
......
    this.updateChart()
    this.startInterval()
},

5.组件销毁停止

destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
    clearInterval(this.timerId)
},

6.鼠标移入停止,鼠标离开启动

 this.chartInstane.on("mouseover", () => {
   clearInterval(this.timerId);
 });
 this.chartInstane.on("mouseout", () => {
   this.startInterval()
 });

二.学习总结

重点：1.地图的点击事件，需要准备每个省份的json文件，给地图的实例对象绑定点击事件，可以获取到当前点击的省份名，注意：由于这里获取的是中文名，想要获取当前省份的json文件路径，需要将其转换为拼音。所以需要引入一个模块，调用该模块函数将中文转化为拼音，并获取当前省份的矢量数据路径。接着注册该数据到全局echarts对象中，最后再绑定双击事件，回到中国地图即可。