Echart中國(guó)地圖更換背景圖的方法示例
更新時(shí)間：2022年03月10日 10:53:10 作者：念念不望必有回響
本文主要介紹了Echart中國(guó)地圖更換背景圖的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
需求
- ui設(shè)計(jì)稿給了一張下面這張圖，背景圖用線條畫(huà)出來(lái)的， 心里也是...，沒(méi)辦法也是要實(shí)現(xiàn)出來(lái)。
解題思路
1.思路一
在canvas外層添加一個(gè)div背景圖用上面的圖片，然后把map地圖背景圖調(diào)成透明，這種方法有很大問(wèn)題，就是后面怎么做hover顯示不同的省份，怎么做縮放呢，難不成還要監(jiān)聽(tīng)canvas的組件事件來(lái)縮放div，所以果斷放棄。
2.思路二
仔細(xì)觀察這張圖是不是有規(guī)律的，它是一個(gè)一個(gè)小方格組成的就像貼地板磚一樣，那我是不是可以利用地圖的紋理來(lái)做文章,經(jīng)過(guò)查找Echart api 正好有設(shè)置紋理的配置，贊。
解題方法
1.標(biāo)準(zhǔn)動(dòng)作一
先找ui切個(gè)"地板磚"，地板轉(zhuǎn)如下圖 (ps:地板磚有點(diǎn)小哈)
2.標(biāo)準(zhǔn)動(dòng)作二
在代碼html里面增加img標(biāo)簽 設(shè)置圖片為切好的地磚
<div class="graph-chart-wrap">
<div class="graph-chart" ref="graph"></div>
<img ref="image" style="width:10px" 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" // 地板是重復(fù)鋪貼嗎
},
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>
<img ref="image" style="width:10px" v-show="false" src="../../../../assets/image/public/repeat2.png" alt />
</div>
</template>
<script lang="ts">
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() {
this.getTreemap();
setInterval(() => {
this.getTreemap();
}, 60000);
this.createChart();
}
private async getTreemap() {
const res = await getTreemap();
if (res && res.data.code === 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: '內(nèi)蒙古', 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: geoCoord.concat(data[i].value)
});
}
}
return res;
};
const dom = this.$refs["image"];
let options: any = {
title: {
top: 20,
// text: '“會(huì)員活躍度” - 山東省',
subtext: '',
x: 'center',
textStyle: {
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
},
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: '',
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 style="width: aoto;text-align:center;line-height:28px; height: auto;color:#fff;font-size: 10px; padding:5px;margin: 0;background:${colorList[params.dataIndex]};border-radius:10px">
<p style="line-height:20px;padding:0;margin:0">${params.name}工廠線</p>
<p style="line-height:20px;padding:0;margin:0">今日實(shí)時(shí)生產(chǎn)總數(shù)</p>
<p style="line-height:20px;padding:0;margin:0">${params.value[2]}</p>
</div>`
},
position:'top',
backgroundColor:'#fff'
}
},
]
};
const graphChart = echarts.init(this.$refs.graph as HTMLCanvasElement);
echarts.registerMap('china', echartMapJSON);
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>最終效果
到此這篇關(guān)于Echart中國(guó)地圖更換背景圖的方法示例的文章就介紹到這了,更多相關(guān)Echart更換背景圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個(gè)常用的方法,用于遍歷數(shù)組或類(lèi)數(shù)組對(duì)象中的每個(gè)元素,本文就來(lái)介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
ES6引入了一個(gè)新的函數(shù)類(lèi)型，發(fā)現(xiàn)它并不符合這種運(yùn)行到結(jié)束的特性。這類(lèi)新的函數(shù)被稱(chēng)為生成器。生成器的出現(xiàn)是我們知道原來(lái)有時(shí)代碼并不會(huì)順利的運(yùn)行，可以通過(guò)暫停的方式進(jìn)行異步回調(diào)，讓我們摒棄了此前的認(rèn)知。本文就來(lái)聊聊JavaScript中生成器的相關(guān)知識(shí)2022-11-11
本篇文章主要介紹了JS幾種變量交換方式以及性能分析對(duì)比，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
JavaScript設(shè)計(jì)模式之代理模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式,簡(jiǎn)單描述了代理模式的概念、原理并結(jié)合實(shí)例形式分析了javascript代理模式的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了基于JavaScript制作可以延時(shí)消失的菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript數(shù)組基于交換的排序示例【冒泡排序】
這篇文章主要介紹了JavaScript數(shù)組基于交換的排序,結(jié)合實(shí)例形式分析了JavaScript排序算法中的冒泡排序簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了GoJs連線上的信息展示使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
javascript中substring()、substr()、slice()的區(qū)別
在js中字符截取函數(shù)有常用的三個(gè)slice()、substring()、substr()了，下面我來(lái)給大家介紹slice()、substring()、substr()函數(shù)在字符截取時(shí)的一些用法與區(qū)別吧。2015-08-08
webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁(yè)面
這篇文章主要介紹了webix+springmvc session超時(shí)跳轉(zhuǎn)登錄頁(yè)面的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
很多人可能遇到這樣的問(wèn)題，JS調(diào)試，而且都很郁悶，雖然我的JS學(xué)的不是那么透徹，基本上算是初級(jí)入門(mén).2010-04-04