使用Echarts設(shè)置地圖并觸發(fā)點(diǎn)擊事件的代碼
更新時間：2023年09月21日 11:32:44 作者：Sreadfast
這篇文章主要給大家介紹了關(guān)于使用Echarts設(shè)置地圖并觸發(fā)點(diǎn)擊事件的的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化庫,可以用于創(chuàng)建各種類型的交互式圖表,包括地圖,需要的朋友可以參考下
先上效果圖
<template>
<div :style="{height: scrollerHeight,width: scrollerWeight}" ref="charts"></div>
</template>
<script>
import * as echarts from "echarts";
import shengfen from "echarts/map/json/china.json";
export default {
data() {
return {
airData : [
{ name: '北京', value: 1},
{ name: '天津', value: 2 },
{ name: '河北', value: 5 },
{ name: '山西', value: 7 },
{ name: '內(nèi)蒙古', value: 10 },
{ name: '遼寧', value: 12 },
{ name: '吉林', value: 15 },
{ name: '黑龍江', value: 18 },
{ name: '上海', value: 20 },
{ name: '江蘇', value: 22 },
{ name: '浙江', value: 25 },
{ name: '安徽', value: 30 },
{ name: '福建', value: 34 },
{ name: '江西', value: 96 },
{ name: '山東', value: 92 },
{ name: '河南', value: 13 },
{ name: '湖北', value: 27 },
{ name: '湖南', value: 17 },
{ name: '廣東', value: 38 },
{ name: '廣西', value: 59 },
{ name: '海南', value: 54 },
{ name: '重慶', value: 66 },
{ name: '四川', value: 8 },
{ name: '貴州', value: 1 },
{ name: '云南', value: 25 },
{ name: '西藏', value: 24 },
{ name: '陜西', value: 25 },
{ name: '甘肅', value: 19 },
{ name: '青海', value: 17 },
{ name: '寧夏', value: 52 },
{ name: '新疆', value: 10 },
{ name: '臺灣', value: 8 },
]
}
},
computed: {
scrollerHeight: function () {
return (document.documentElement.clientHeight - 250) + 'px'; //自定義高度
},
scrollerWeight: function () {
return (document.documentElement.clientWeight - 550) + 'px'; //自定義寬度
}
},
created() {
this.$nextTick(() => {
this.initCharts();
})
},
methods: {
initCharts() {
const charts = echarts.init(this.$refs["charts"]);
const option = {
backgroundColor: "rgba(0, 0, 0, 0)",//地圖組件的背景色
// 提示浮窗樣式
tooltip: {
show: true,
trigger: 'item', //坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用
axisPointer: {// 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
},
alwaysShowContent: false,
backgroundColor: "rgba(36, 215, 209, 1)",//提示框背景色
borderColor: "rgba(255, 255, 0, 1)",
triggerOn: "mousemove",
enterable: true, //鼠標(biāo)是否可進(jìn)入提示框浮層中
textStyle: {
fontSize: "12",
overflow: "break",
},
formatter: function (params) {//提示框顯示的內(nèi)容
// console.log('params',params)
let str = '';
str = `<div> ` + params.name + `:` + params.value + `</div>`
return str
},
},
// visualMap: { //分段型視覺映射組件
// show: true,
// type: 'piecewise',
// left: 50,
// bottom: 50,
// showLabel: true,
// itemWidth: 10,
// itemHeight: 10,
// inverse: true,
// // lt:小于; lte:小于等于; gt:大于; gte:大于等于;
// pieces: [
// {
// lt: 5,
// label: "<5ms",
// color: "#83CBAC"
// },
// {
// gte: 5,
// lte: 10,
// label: "5-10ms",
// color: "#55BB8A"
// },
// {
// gt: 10,
// lte: 15,
// label: "10-15ms",
// color: "#20A162"
// },
// {
// gt: 15,
// lte: 20,
// label: "15-20ms",
// color: "#9ABEFA"
// },
// {
// gt: 20,
// lte: 30,
// label: '20-30ms',
// color: "#78A9F9"
// },
// {
// gt: 30,
// label: '>30ms',
// color: "#5693F7"
// }
// ]
// },
// 地圖配置
geo: {
map: "china",
aspectScale: 0.8, //長寬比,0.75的含義為寬是高的0.75,假如高為100,寬就只有75;0.5的含義就是寬只有高的一半,假如高為100,寬就只有50
zoom: 0.5, //視覺比例大小,1.2即為原有大小的1.2倍
roam: false, //是否開啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開啟?？梢圆挥迷O(shè)置,如果只想要開啟縮放或者平移，可以設(shè)置成 'scale' 或者 'move'。
top: '0',//地圖距離頂部的距離
label: {
// 通常狀態(tài)下的樣式
normal: {
show: true,
textStyle: {
color: "#fff",//地圖上文字的顏色
},
},
// 鼠標(biāo)放上去的樣式
emphasis: {
textStyle: {
color: "rgba(242, 153, 74, 1)",
},
},
},
// 地圖區(qū)域的樣式設(shè)置
itemStyle: {
normal: {
areaColor: "#457AAC",//地圖填充色
borderColor: "rgba(36, 215, 209, 1)",//地圖分割線顏色
borderWidth: 1,
},
// 鼠標(biāo)放上去高亮的樣式
emphasis: {
areaColor: "#37AAE8",//地圖填充色
borderColor: "#08EFEF",//地圖分割線顏色
borderWidth: 1,
},
},
},
series: [
{
selectedMode: false, //取消地圖區(qū)域點(diǎn)擊事件
geoIndex: 0, //將數(shù)據(jù)和第0個geo配置關(guān)聯(lián)在一起
type: 'map',
data: this.airData,
},
],
};
// 地圖注冊，第一個參數(shù)的名字必須和option.geo.map一致
echarts.registerMap("china", shengfen )//第一個參數(shù)為配置設(shè)置的名稱，第二個參數(shù)為引入的地圖名稱
charts.setOption(option);
charts.on("click", function (params) { //點(diǎn)擊事件
console.log('我被點(diǎn)擊了',params)
});
// charts.on("mouseover", function () { //取消鼠標(biāo)移入地圖區(qū)域高亮
// charts.dispatchAction({
// type: 'legendUnSelect'
// });
// });
},
}
}
</script>
<style>
</style>有坑需要小伙伴們避開，Echarts版本號超過4.9就不能使用地圖軟件了，所以需要先卸載高版本再安裝
// 卸載echarts運(yùn)行： npm uninstall echarts
// 安裝4.9版本的echarts npm install echarts@4.9.0 --save
配置好后復(fù)制就可以看到效果。
總結(jié)
到此這篇關(guān)于使用Echarts設(shè)置地圖并觸發(fā)點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)Echarts設(shè)置地圖觸發(fā)點(diǎn)擊事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript高級程序設(shè)計(jì) 閱讀筆記（十七） js事件
IE中是冒泡型事件，即從最特定的事件目標(biāo)到最不特定的事件目標(biāo)2012-08-08
JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(xiàn)方法,涉及JavaScript鼠標(biāo)事件結(jié)合頁面元素的操作技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了selenium+java中用js來完成日期的修改,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
uniapp制作一個收縮通訊錄的實(shí)現(xiàn)代碼
這篇文章主要介紹了uniapp制作一個收縮通訊錄的實(shí)現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了如何通過原生js實(shí)現(xiàn)設(shè)為首頁并兼容ie、火狐和谷歌,需要的朋友可以參考下2014-06-06
scroll-view為滾動視圖,分為水平滾動和垂直滾動,這篇文章主要給大家介紹了關(guān)于微信小程序scroll-view不能左右滑動問題的解決方法,需要的朋友可以參考下2022-12-12
本文給大家分享的是個人項(xiàng)目中需要的一個小功能，當(dāng)時經(jīng)過一番度娘才實(shí)現(xiàn)，現(xiàn)在從項(xiàng)目中拿出來，分享給大家，需要的小伙伴快來參考下吧。2015-04-04
javascript中String對象的slice()方法分析
這篇文章主要介紹了javascript中String對象的slice()方法,以實(shí)例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設(shè)置Textarea以及把文本放到標(biāo)記里都不會起作用，下面有個不錯的解決方法，感興趣的朋友可以了解下2014-01-01
提高代碼性能技巧談—以創(chuàng)建千行表格為例...2006-07-07