當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

echarts 2D地图散点图(带立体效果)tooltips中点击事件

發布時間：2024/3/13 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts 2D地图散点图(带立体效果)tooltips中点击事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

模板

<template><div class="wrapper"><div class="chart" id="chart"></div><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>這是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">確定</el-button></span></el-dialog></div> </template>

js?

1 、2d地圖是平面的，可以設置傾斜度，邊加陰影，這樣就有立體感了

2 、tooltips上設置點擊事件，在methods不會觸發的，要先在全局下掛載

樣式

下面是完整代碼

??<div?class="wrapper">

????<div?class="chart"?id="chart"></div>

????<el-dialog

??????title="提示"

??????:visible.sync="dialogVisible"

??????width="30%"

??????:before-close="handleClose"

????>

??????<span>這是一段信息</span>

??????<span?slot="footer"?class="dialog-footer">

????????<el-button?@click="dialogVisible?=?false">取?消</el-button>

????????<el-button?type="primary"?@click="dialogVisible?=?false"

??????????>確?定</el-button

????????>

??????</span>

????</el-dialog>

??</div>

</template>

import?shanghai?from?"../../static/map/js/province/shanghai";

//?用來保存所有的地圖實例

const?globalMap?=?{};

//?params?當前tooltip數據，?key:?當前實例的鍵值

window.onClickSeries?=?function(params,?key)?{

??testFun(params,?key);?//?直接通過window方法去調用methods中對應方法

??//?獲取當前id地圖的回調方法并執行

??console.log(params);

};

export?default?{

??data()?{

????return?{

??????dialogVisible:?false,

??????city:?"",

??????dataS:?[

????????{?name:?`浦東新區`,?value:?[121.567706,?31.245944,?1]?},

????????{?name:?`寶山區`,?value:?[121.489934,?31.398896,?2]?},

????????{?name:?`崇明區`,?value:?[121.526,?31.658,?3]?},

????????{?name:?`嘉定區`,?value:?[121.250333,?31.383524,?4]?},

????????{?name:?`青浦區`,?value:?[121.113021,?31.151209,?5]?},

????????{?name:?`楊浦區`,?value:?[121.522797,?31.270755,?6]?},

????????{?name:?`虹口區`,?value:?[121.491832,?31.26097,?7]?},

????????{?name:?`普陀區`,?value:?[121.392499,?31.241701,?8]?},

????????{?name:?`靜安區`,?value:?[121.448224,?31.229003,?9]?},

????????{?name:?`黃浦區`,?value:?[121.490317,?31.222771,?10]?},

????????{?name:?`長寧區`,?value:?[121.4222,?31.218123,?11]?},

????????{?name:?`徐匯區`,?value:?[121.43752,?31.179973,?12]?},

????????{?name:?`松江區`,?value:?[121.223543,?31.03047,?13]?},

????????{?name:?`閔行區`,?value:?[121.375972,?31.111658,?14]?},

????????{?name:?`金山區`,?value:?[121.458472,?30.912345,?15]?},

????????{?name:?`奉賢區`,?value:?[121.458472,?30.912345,?16]?}

??????]

????};

??},

??created()?{},

??mounted()?{

????this.drawChart();

????window.testFun?=?this.testFun;

??},

??methods:?{

????//?vue內部方法

????testFun(va1,?va2)?{

??????console.log(va1,?va2);

??????this.dialogVisible?=?true;

????},

????//?彈框

????handleClose(done)?{

??????this.$confirm("確認關閉？")

????????.then(_?=>?{

??????????done();

????????})

????????.catch(_?=>?{});

????},

????drawChart()?{

??????//?基于準備好的dom，初始化echarts實例

??????let?chart?=?this.$echarts.init(document.getElementById("chart"));

??????//?監聽屏幕變化自動縮放圖表

??????window.addEventListener("resize",?function()?{

????????chart.resize();

??????});

??????//?繪制圖表

??????chart.setOption({

????????//?圖表主標題

????????title:?{

??????????text:?"全國各省人口",?//?主標題文本，支持使用?\n?換行

??????????top:?20,?//?定位?值:?'top',?'middle',?'bottom'?也可以是具體的值或者百分比

??????????left:?"center",?//?值:?'left',?'center',?'right'?同上

??????????textStyle:?{

????????????//?文本樣式

????????????fontSize:?24,

????????????fontWeight:?600,

????????????color:?"#fff"

??????????}

????????},

????????//?提示框組件

????????tooltip:?{

??????????trigger:?"item",?//?觸發類型,?數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用

??????????//?提示框浮層內容格式器，支持字符串模板和回調函數兩種形式

??????????//?使用函數模板??傳入的數據值?->?value:?number?|?Array

??????????triggerOn:?"click",

??????????enterable:?true,

??????????formatter:?function(val)?{

????????????console.log(val);

????????????let?valu?=?val.data.value;

????????????return?(

??????????????val.data.name?+

??????????????"<br>人口數量:?"?+

??????????????val.data.value[2]?+

??????????????"萬"?+

??????????????`<button??οnclick="onClickSeries(\'`?+

??????????????valu?+

??????????????`\',\'?`?+

??????????????1?+

??????????????`\')">這是顯示的文本</button>`

????????????);

??????????}

????????},

????????geo:?{

??????????zoom:?1,

??????????//?geoIndex:?1,

??????????aspectScale:?1,?//長寬比

??????????map:?"上海",?//?地圖類型

??????????show:?true,?//?是否顯示地理坐標系組件

??????????//?是否開啟鼠標縮放和平移漫游?默認不開啟?如果只想要開啟縮放或者平移，

??????????//?可以設置成?'scale'?或者?'move'?設置成?true?為都開啟

??????????roam:?false,

??????????//?圖形上的文本標簽

??????????label:?{

????????????show:?false?//?是否顯示對應地名

??????????},

??????????//?地圖區域的多邊形?圖形樣式

??????????itemStyle:?{

????????????normal:?{

??????????????areaColor:?"#053fc4",?//?地圖顏色

??????????????borderWidth:?5,?//?邊框的寬度

??????????????shadowColor:?"#0098d9",?//??陰影顏色

??????????????borderColor:?"#00FFFF",?//?邊框顏色

??????????????//?shadowOffsetX:?-5,

??????????????//?shadowOffsetY:?10,

??????????????shadowBlur:?12,?//?陰影的模糊大小

??????????????shadowOffsetX:?0,?//陰影水平方向上的偏移距離

??????????????shadowOffsetY:?12?//?陰影垂直方向上的偏移距離

????????????},

????????????emphasis:?{

??????????????show:?false

????????????}

??????????},

??????????//?高亮狀態下的多邊形和標簽樣式

??????????emphasis:?{

????????????label:?{

??????????????show:?true,?//?是否顯示標簽

??????????????color:?"#fff"?//?文字的顏色?如果設置為?'auto'，則為視覺映射得到的顏色，如系列色

????????????},

????????????itemStyle:?{

??????????????areaColor:?"#9cc3f5"?//?地圖區域的顏色

????????????}

??????????}

????????},

????????series:?[

??????????{

????????????type:?"map",

????????????map:?"上海",

????????????//?center:?[112.194115019531,?23.582111640625],

????????????zoom:?1,

????????????geoIndex:?1,

????????????aspectScale:?1,?//長寬比

????????????showLegendSymbol:?false,?//?存在legend時顯示

????????????label:?{

??????????????normal:?{

????????????????show:?true,

????????????????textStyle:?{

??????????????????fontSize:?8,

??????????????????color:?"#ccc"

????????????????}

??????????????},

??????????????emphasis:?{

????????????????show:?false,

????????????????textStyle:?{

??????????????????color:?"#ccc"

????????????????}

??????????????}

????????????},

????????????roam:?false,

????????????itemStyle:?{

??????????????normal:?{

????????????????areaColor:?"#053fc4",

????????????????borderColor:?"#fff",

????????????????fontWeightL:?700,

????????????????borderWidth:?1

??????????????},

??????????????emphasis:?{

????????????????areaColor:?{

??????????????????type:?"linear",

??????????????????x:?0,

??????????????????y:?0,

??????????????????x2:?0,

??????????????????y2:?1,

??????????????????colorStops:?[

????????????????????{

??????????????????????offset:?0,

??????????????????????color:?"#3f15d6"?//?0%?處的顏色

????????????????????},

????????????????????{

??????????????????????offset:?1,

??????????????????????color:?"#d243cd"?//?100%?處的顏色

????????????????????}

??????????????????],

??????????????????globalCoord:?false?//?缺省為?false

????????????????}

??????????????}

????????????},

????????????data:?this.dataS

??????????},

??????????{

????????????type:?"scatter",?//?類型

????????????coordinateSystem:?"geo",?//?該系列使用的坐標系?可選:?'cartesian2d','polar','geo'

????????????//?標記的圖形,?標記類型包括?'circle',?'rect',?'roundRect',?'triangle',?'diamond',

????????????//?'pin',?'arrow',?'none'

????????????symbol:?"circle",

????????????symbolSize:?8,?//?標記的大小

????????????//?圖形的樣式

????????????itemStyle:?{

??????????????normal:?{

????????????????//?areaColor:?'#00FFFF',?//?地圖顏色

????????????????borderWidth:?1,?//?邊框的寬度

????????????????shadowColor:?"#0098d9",?//??陰影顏色

????????????????borderColor:?"#00FFFF",?//?邊框顏色

????????????????//?shadowOffsetX:?-5,

????????????????//?shadowOffsetY:?10,

????????????????shadowBlur:?12,?//?陰影的模糊大小

????????????????shadowOffsetX:?0,?//陰影水平方向上的偏移距離

????????????????shadowOffsetY:?12?//?陰影垂直方向上的偏移距離

??????????????},

??????????????emphasis:?{

????????????????show:?false

??????????????}

????????????},

????????????//?系列中的數據內容數組,?數組項通常為具體的數據項

????????????data:?this.dataS

??????????},

??????????{

????????????type:?"effectScatter",?//?類型

????????????coordinateSystem:?"geo",?//?該系列使用的坐標系?可選:?'cartesian2d','polar','geo'

????????????//?標記的圖形,?標記類型包括?'circle',?'rect',?'roundRect',?'triangle',?'diamond',

????????????//?'pin',?'arrow',?'none'

????????????symbol:?"circle",

????????????//?標記的大小,?如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數

????????????//?(value:?Array|number,?params:?Object)?=>?number|Array

????????????//?其中第一個參數?value?為?data?中的數據值。第二個參數params?是其它的數據項參數

????????????symbolSize:?function(val)?{

??????????????return?val[2]?/?600;

????????????},

????????????//?圖形的樣式

????????????itemStyle:?{

??????????????normal:?{

????????????????//?areaColor:?'#00FFFF',?//?地圖顏色

????????????????borderWidth:?1,?//?邊框的寬度

????????????????shadowColor:?"#0098d9",?//??陰影顏色

????????????????borderColor:?"#00FFFF",?//?邊框顏色

????????????????//?shadowOffsetX:?-5,

????????????????//?shadowOffsetY:?10,

????????????????shadowBlur:?12,?//?陰影的模糊大小

????????????????shadowOffsetX:?0,?//陰影水平方向上的偏移距離

????????????????shadowOffsetY:?12?//?陰影垂直方向上的偏移距離

??????????????},

??????????????emphasis:?{

????????????????show:?false

??????????????}

????????????},

????????????//?系列中的數據內容數組。數組項通常為具體的數據項

????????????data:?[

??????????????{?name:?`長寧區`,?value:?[121.4222,?31.218123,?11]?},

??????????????{?name:?`徐匯區`,?value:?[121.43752,?31.179973,?12]?},

??????????????{?name:?`松江區`,?value:?[121.223543,?31.03047,?13]?},

??????????????{?name:?`閔行區`,?value:?[121.375972,?31.111658,?14]?},

??????????????{?name:?`金山區`,?value:?[121.458472,?30.912345,?15]?},

??????????????{?name:?`奉賢區`,?value:?[121.458472,?30.912345,?16]?}

????????????]

??????????}

????????]

??????});

????}

??}

};

</script>

<style?scoped>

.wrapper?{

??width:?100%;

}

.wrapper?.chart?{

??width:?800px;

??height:?500px;

??margin:?100px?50px?0;

??border:?1px?solid?#eeeeee;

??/*?background:?url(../../public/static/bg.png)?no-repeat;?*/

??background-size:?100%?100%;

}

#chart?{

??pointer-events:?all;

}

</style>

總結

以上是生活随笔為你收集整理的echarts 2D地图散点图(带立体效果)tooltips中点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： FPGA基础设计（10）Verilog行
下一篇：计算机专业怎么选择笔记本,选错一次，后悔