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 地图的点击事件
目标: 实现点击某个地区进入当前当前的地图,双击后又回到中国地图
- 给地图的全局对象绑定响应图表的点击事件, 并获取点击项相关的数据
async initChart () {
......
this.chartInstance.on('click', arg => {
// arg.name 就是所点击的省份名称, 是中文
})
-
将资料中的 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
- 回到中国地图
绑定双击事件函数@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>
-
性能优化,例如:如果已经点击过安徽地区,而此地区的数据在第一次已经请求过数据,在次点击时就可以直接利用,这样可以减少请求发送的次数提高性能。
所以想要直接利用请求过的数据,想要初始化一个对象将获取的数据存储在这个对象中
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对象中,最后再绑定双击事件,回到中国地图即可。