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不會觸發的，要先在全局下掛載
<script> import shanghai from "../../static/map/js/province/shanghai"; // params 當前tooltip數據， window.onClickSeries = function(params, key) {testFun(params, key); // 直接通過window方法去調用methods中對應方法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 | ArraytriggerOn: "click",enterable: true,formatter: function(val) {console.log(val);let valu = val.data.value;return (val.data.name +"<br>人口數量: " +val.data.value[2] +"萬" +`<button onclick="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-size: 100% 100%; } #chart {pointer-events: all; } </style>下面是完整代碼
<template>
??<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>
<script>
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行
- 下一篇： 计算机专业怎么选择笔记本,选错一次，后悔