Echart中国地图更换背景图的⽅法⽰例
⽬录
需求
解题思路
解题⽅法
最终效果
需求
ui设计稿给了⼀张下⾯这张图，背景图⽤线条画出来的，⼼⾥也是...，没办法也是要实现出来。
解题思路
1.思路⼀
在canvas外层添加⼀个div背景图⽤上⾯的图⽚，然后把map地图背景图调成透明，这种⽅法有很⼤问题，
就是后⾯怎么做hover显⽰不同的省份，怎么做缩放呢，难不成还要监听canvas的组件事件来缩放div，所以果断放弃。
2.思路⼆
仔细观察这张图是不是有规律的，它是⼀个⼀个⼩⽅格组成的就像贴地板砖⼀样，那我是不是可以利⽤地图的纹理来做⽂章，经过查Echart api 正好有设置纹理的配置，赞。
解题⽅法
1.标准动作⼀
先ui切个"地板砖"，地板转如下图 (ps：地板砖有点⼩哈)
2.标准动作⼆
在代码html⾥⾯增加img标签设置图⽚为切好的地砖
<div class="graph-chart-wrap">
<div class="graph-chart" ref="graph"></div>
<img ref="image"   v-show="false" src="/assets/image/public/repeat2.png" alt />
</div>
在定义options的上⾯获取img
const dom = this.$refs["image"];
配置options
geo: {
map: 'china',
show: true,
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
type: "map",
geoIndex: "1",
zoom: 1.2,
itemStyle: {
normal: {
areaColor: {
image: dom, // 这⾥是引⽤上⾯的img html
repeat: "repeat" // 地板是重复铺贴吗
},
borderColor: "rgba(0,0,0,0.2)"
},
emphasis: {
areaColor:'#69a5ff',
color: "#fff"
},
label: {
show: false
},
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 100
}
},
全部代码
<template>
<div class="graph-chart-wrap">
<div class="graph-chart" ref="graph"></div>
import { Component, Vue } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { getTreemap } from '@/api/home';
import { fontSize } from '@/utils/index';
const echartMapJSON = require('@/assets/map/china.json');
@Component({
name: 'graph',
components: {}
})
export default class extends Vue {
private dataList = [];
mounted() {
setInterval(() => {
}, 60000);
}
private async getTreemap() {
const res = await getTreemap();
if (res && de === 200) {
this.dataList = res.data.data;
}
}
private createChart() {
const GeoCoordMap: any = {
北京市: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
重庆: [108.384366, 30.439702],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
⼴东: [113.12244, 23.009505],
上海: [121.4648, 31.2891]
};
const data = [
{ name: '北京', value: 199 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '⼭西', value: 81 },
{ name: '内蒙古', value: 47 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 82 },
{ name: '⿊龙江', value: 123 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 92 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 109 },
{ name: '福建', value: 116 },
{ name: '江西', value: 91 },
{ name: '⼭东', value: 119 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 116 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 125 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '⽢肃', value: 56 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 180 },
{ name: '⼴东', value: 123 },
{ name: '⼴西', value: 59 },
{ name: '海南', value: 14 }
];
const colorList = [
'#5776DE','#709EED','#6434D5','#E26395','#E8A057','#6434D5'    ]
const convertData = (data: any) => {
let res = [];
for (let i = 0; i < data.length; i++) {
const geoCoord = GeoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: at(data[i].value)
});
}
}
return res;
};
const dom = this.$refs["image"];
let options: any = {
title: {
top: 20,
// text: '“会员活跃度” - ⼭东省',
color: '#fff'
}
},
tooltip: {
trigger: 'item',
backgroundColor:'#fff',
className: 'echarts-tooltip echarts-tooltip-dark echarts-tooltip-user',
borderColor:'#e6e6e6',
padding: 4,
triggerOn:'click'
},
geo: {
map: 'china',
show: true,
roam: true,
label: {
normal: {
show: true
setoption
},
emphasis: {
show: true
}
},
type: "map",
geoIndex: "1",
zoom: 1.2,
itemStyle: {
normal: {
areaColor: {
image: dom,
repeat: "repeat"
},
borderColor: "rgba(0,0,0,0.2)"
},
emphasis: {
areaColor:'#69a5ff',
color: "#fff"
},
label: {
show: false
},
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 100
}
},
series: [
{
symbolSize: 5,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
},
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data)
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: [8, 8],
itemStyle: {
normal: {
color:function(params:{ dataIndex: any }){
return colorList[params.dataIndex]
}
}
},
data: convertData(data),
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1,
tooltip: {
formatter: function (params: { value: any[]; name: any; dataIndex: number }) {
return `<div >              <p >${params.name}⼯⼚线</p>
<p >今⽇实时⽣产总数</p>
<p >${params.value[2]}</p>
</div>`
},
backgroundColor:'#fff'
}
},
]
};
const graphChart = echarts.init(this.$aph as HTMLCanvasElement);
graphChart.setOption(options);
let len = -1;
setInterval(() => {
const dataLen = colorList.length;
len = (len + 1) % dataLen;
graphChart.dispatchAction({
type: 'hideTip'
});
graphChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: len
});
}, 2000);
}
}
</script>
最终效果
到此这篇关于Echart中国地图更换背景图的⽅法⽰例的⽂章就介绍到这了，更多相关Echart更换背景图内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。